Question

所以我有几个正方形，当我将鼠标悬停在一个上面时，我想要一个菜单出现。然后，当我徘徊时，我希望它消失。简单吧？

所以问题是当我将鼠标快速移动到它们上面时，其中一些会保持...隐藏。我可以从squares继续透明，但我的mouseout事件也没有被解雇..因为我的鼠标很远，我的黑色菜单仍在广场上方！

如此淡出粉红色方块更能说明问题。我最为困扰的是黑方并没有消失。

＆＃13;

$(document).ready(function() {
  $('.square').mouseenter(faceon);
  $('#hover_controls').mouseleave(faceout);
});

function faceon() {
  $(this).stop().clearQueue().fadeTo("slow", 0.15);
  $('#hover_controls').stop().clearQueue().css({
    top: $(this).offset().top + "px",
    left: $(this).offset().left + "px",
    display: 'block'
  }).fadeTo("fast", 1);
}

function faceout(event) {
  var e = event.toElement || event.relatedTarget;
  if (e.parentNode == this || e == this) {
    return;
  }
  $('.square').stop().clearQueue().fadeTo("slow", 1);
  $('#hover_controls').stop().clearQueue().fadeTo("fast", 0, function() {
    $(this).hide();
  });
}

＆＃13;

.square {
  height: 72px;
  width: 72px;
  background: pink;
  margin: 5px;
  display: inline-block;
}

#hover_controls {
  display: none;
  height: 62px;
  width: 62px;
  opacity: 0;
  padding: 5px;
  position: fixed;
  background: #000;
  border-radius: 10px;
  z-index: 2;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='hover_controls'>
  <a href='#' onclick='alert("aaa");'>a</a>
  <a href='#' onclick='alert("bbbb");'>b</a>
</div>

<div class="list">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

＆＃13;

有什么想法吗？

Answer 1

分别用mouseover和mouseout替换mouseenter和mouseleave。我希望这会有所帮助。

Answer 2

更改事件处理程序，修复条件中的e问题，如果鼠标移出快速$(document).ready(function() { $('.square').on("mouseenter", faceon); $('#hover_controls').on("mouseleave", faceout); }); function faceon() { $(this).stop().clearQueue().fadeTo("slow", 0.15); $('#hover_controls').stop().clearQueue().css({ top: $(this).offset().top + "px", left: $(this).offset().left + "px", display: 'block' }).fadeTo("fast", 1); } function faceout(event) { var e = event.toElement || event.relatedTarget; if (e && (e.parentNode == this || e == this)) { return; } $('.square').stop().clearQueue().fadeTo("slow", 1); $('#hover_controls').stop().clearQueue().fadeTo("fast", 0, function() { $(this).hide(); }); }为空。

这里的复杂功能是mouseenter / mouseleave和动画 - 请注意，这些事件位于不同的元素上，其中一个元素在事件触发时显示/隐藏。因此，鼠标移动事件可能无法正常触发，因为它被钩住的元素在快速鼠标上不可见＃34;行动行为。

＆＃13;

.square {
  height: 72px;
  width: 72px;
  background: pink;
  margin: 5px;
  display: inline-block;
}

#hover_controls {
  display: none;
  height: 62px;
  width: 62px;
  opacity: 0;
  padding: 5px;
  position: fixed;
  background: #000;
  border-radius: 10px;
  z-index: 2;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='hover_controls'>
  <a href='#' onclick='alert("aaa");'>a</a>
  <a href='#' onclick='alert("bbbb");'>b</a>
</div>

<div class="list">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

＆＃13;

{{1}}

＆＃13;

简单的悬停控件

2 个答案: