Question

在悬停时我想隐藏span（选项）并显示span（options2），当指针超出该范围时，它将恢复到正常阶段，如span（options2）hide和span（options）show。有一段时间它可以工作，但有时候跨度（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是兄弟姐妹。

＆＃13;

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

＆＃13;

.options-2 {
  display: none;
}

＆＃13;

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

＆＃13;

我有一个JQuery工作但很小的bug

1 个答案: