我有一个JQuery工作，但小马车

Question

在悬停时，我想隐藏span (选项)和显示广度(Options2)，当指针超出该范围时，它将回到正常阶段，如span(options2)、hide和span(选项)显示。一些时间它工作，但在一些时间跨度(Options2)显示，而不是隐藏后，指针走出跨度，它卡住，并不断显示跨度(Options2)，直到我们不再悬停。

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();
    });
});

Answer 1

您需要将mouseout事件处理程序绑定到外部。此外，.prev()和.next()也可以用作.options和.options-2的兄弟姐妹。

​

$(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>

​