javascript - 简单的悬停控件

Question

所以我有几个方 block ，当我将鼠标悬停在一个方 block 上时，我希望显示一个菜单。然后，当我悬停时，我希望它消失。简单吧？

所以问题是，当我将鼠标快速移动到它们上方时，其中一些会保持...隐藏。我可以放弃 squares 变得透明，但我的 mouseout 事件也没有正确触发..因为我的鼠标离得很远，而且我的黑色菜单仍然位于正方形!

因此淡出粉色方 block 更能说明问题。我最烦恼的是黑色方 block 没有消失。

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

.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;
}

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

有什么想法吗？

Answer 1

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