CODEWITHSUNDEEP
javascriptjquery
qarar
qarar

Reputation: 5

I have a JQuery working but little buggy

On hover I want to hide span(options) and show span(options2) and when the pointer out of that span it will it will be back to normal stage like span(options2) hide and span(options) show. Some time it work but some time the span(options2) shows and not hide after pointer out of the span it stuck and continuously show the span(options2) until we don't hover again.

HTML: 

<div class="layer"> <span class="pull-left circle border-solid full"><i class="flaticon stroke checkmark-1"></i></span>
    <span class="pull-right options"><ul class="null"><li></li><li></li><li></li></ul></span>
    <span class="pull-right options-2">
               <ul class="null">
                    <li><a href="#fakelink"><i class="fa fa-trash-o"></i></a></li>
                    <li><a href="#fakelink"><i class="fa fa-pencil"></i></a></li>
                </ul>
            </span>

    <div class="col-md-12 col-sm-12 col-xs-12 null">
        <button class="btn btn-layer">Preview</button>
    </div>
</div>

JQuery: 

$(this).find('.layer').find('.options').hover(function () {
    $(this).hide();
    $(this).parent('.layer').find('.options-2').show();
    $(this).parent('.layer').find('.options-2').mouseout(function () {
        $(this).hide();
        $(this).parent('.layer').find('.options').show();
    });
});

Upvotes: 0

Views: 46

Answers (1)

Satpal
Satpal

Reputation: 133423

You need to bind the mouseout event handler outside. Also .prev() and .next() can be used as .options and .options-2 are siblings.

$(function() {
  $('.layer .options').hover(function() {
    $(this).hide();
    $(this).next('.options-2').show();
  });

  $('.layer .options-2').mouseout(function() {
    $(this).hide();
    $(this).prev('.options').show();
  });
})
.options-2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer">
  <span class="pull-left circle border-solid full">
    <i class="flaticon stroke checkmark-1"></i>
  </span>
  <span class="pull-right options">
    options
  </span>
  <span class="pull-right options-2">
    options-2
  </span>
</div>

Upvotes: 1

Related Questions