为什么这个 mousemove 的叠加层不会在 mouseleave 上消失？

Question

我有一个天蓝色的矩形。当鼠标在天蓝色矩形内移动时，一个较小的矩形会随着鼠标移动。当鼠标离开该区域时，较小的矩形应该会消失，但有时它会继续显示。

我没有看到代码的任何内容。谁能告诉我为什么会这样？

$(function() {
  $("#div1").on("mousemove", function(e) {
    $("#div2").css({
      "display": "inline",
      "left": e.clientX,
      "top": e.clientY
    });
  })
  $("#div1").on("mouseleave", function() {
    $("#div2").hide();
  })
})

#div1 {
  background-color: skyblue;
  width: 200px;
  height: 100px
}
#div2 {
  background-color: white;
  width: 35px;
  height: 15px;
  border: 1px solid black;
  display: none;
  position: fixed;
}
#div2 p {
  font-size: 12px;
  margin: 0px 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div1">
  <div id="div2">
    <p>mouse</p>
  </div>
</div>

Answer 1

这里用css到show/hide到div，用js把div移动到光标处：

document.body.addEventListener("mousemove", function(e) {
    var div2 = document.getElementById("div2");

    div2.style.left = e.clientX + "px";
    div2.style.top  = e.clientY + "px";
});

#div1 {
    width: 200px;
    height: 100px;
    background: skyblue;
}

#div2 {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 35px;
    background: white;
    border: 1px solid black;
    padding: 2px;
    font-size:3px;
    display: none;
}
    
#div1:hover + #div2 {
    display: block;
}

<div id="div1"></div>
<div id="div2">mouse</div>

Answer 2

您遇到的问题是因为您的鼠标没有离开 #div1，因为超过了 #div2，它是 #div1.[=25 的子项=]

由于 #div2 是 position: fixed;，您不需要将其作为 #div1 的子代。尽管可以检查 e.clientX 或 e.clientY 在 #div1 的实际天蓝色矩形之外并将其用作触发事件，但移动 #div2 在 DOM 中的 #div1 中，像这样：

<div id="div1">

</div>
<div id="div2">
  <p style="font-size:3px;margin:0px 2px;">mouse</p>
</div>

下面的代码片段展示了这个工作原理。

$(function() {
  $("#div1").on("mousemove", function(e) {
    $("#div2").css({
      "display": "inline",
      "left": e.clientX,
      "top": e.clientY
    });
  })
  $("#div1").on("mouseleave", function() {
    $("#div2").hide();
  })
})

#div1 {
  background-color: skyblue;
  width: 200px;
  height: 100px;
}
#div2 {
  background-color: white;
  width: 35px;
  height: 15px;
  border: 1px solid black;
  display: none;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">

</div>
<div id="div2">
  <p style="font-size:3px;margin:0px 2px;">mouse</p>
</div>

为什么这个 mousemove 的叠加层不会在 mouseleave 上消失？

Why isn't this overlay for mousemove disappearing on mouseleave?

html

javascript

jquery

jquery-events