简单的悬停控件

Question

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

所以问题是当我将鼠标快速移到它们上方时，它们中的一些会保持...隐藏。我可以从squares 辞职，变得透明，但我的mouseout 事件也没有被触发。因为我的鼠标离我很远，我的黑色菜单仍然在一个正方形的顶部！

所以淡出粉红色方块更能说明问题。我最烦恼的是黑色方块不消失。

$(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。我希望这会有所帮助。

Answer 2

更改事件处理程序，在e 为空的情况下，如果鼠标快速移出，则使用条件e 修复问题。

这里的复杂之处在于 mouseenter/mouseleave 和动画 - 请注意，这些事件位于不同的元素上，您可以在事件触发时显示/隐藏其中一个元素。因此，mouseleave 事件可能不会一直正确触发，因为它被挂钩的元素在“快速鼠标”动作行为中不可见。

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

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