Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您看到的问题是因为您的鼠标已离开#div1，因为#div2已成为#div1的孩子。< / p>

由于#div2为position: fixed;，因此您无需将其作为#div1的孩子。虽然可以检查e.clientX或e.clientY是否在#div1的实际天蓝色矩形之外，并将其用作触发事件，但移动{{1}会更简单}在DOM中的#div2之外，如下所示：

#div1

下面的代码段显示了这项工作正在进行中。

＆＃13;

<div id="div1">

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这使用css来显示/隐藏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>

为什么鼠标移动时这个叠加层没有消失？

2 个答案: