我有一个JQuery工作，但小越野车

I have a JQuery working but little buggy

本文关键字：越野车 工作 有一个 JQuery      更新时间：2023-09-26

悬停时，我想隐藏跨度(选项(并显示跨度(选项2(，当指针超出该跨度时，它将返回到正常阶段，如span(选项2(隐藏和span(选项(显示。有时它可以工作，但有时 span(options2( 显示并且不会隐藏指针离开它卡住的范围并持续显示 span(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();
    });
});
您需要

将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>

相关文章：