附加到光标的故障 div

Question

我正在尝试将div附加到光标上。div 仅在它位于特定框上时才会出现，并且根据它悬停在其上的框填充一条 html 消息。

我已经将光标连接到鼠标上，但是当我将鼠标悬停在任何框上时(悬停在上面时也会变成白色(时，div 和框"故障"真的很难。我认为这与 z 索引有关，但我无法弄清楚。

function mouseHandler(ev) {
  document.getElementById('boxshadow').style.transform = 'translateY(' + (ev.clientY) + 'px)';
  document.getElementById('boxshadow').style.transform += 'translateX(' + (ev.clientX) + 'px)';
}
document.getElementById("talk").addEventListener("mousemove", mouseHandler)
document.getElementById("time").addEventListener("mousemove", mouseHandler)
document.getElementById("chat").addEventListener("mousemove", mouseHandler)
$("#talk").mouseleave(function() {
  $("#boxshadow").hide()
});
$("#talk").mouseover(function() {
  $("#boxshadow").show()
  $("#boxshadow").html("Message1")
});
$("#time").mouseleave(function() {
  $("#boxshadow").hide()
});
$("#time").mouseover(function() {
  $("#boxshadow").show()
  $("#boxshadow").html("Message2")
});
$("#chat").mouseleave(function() {
  $("#boxshadow").hide()
});
$("#chat").mouseover(function() {
  $("#boxshadow").show()
  $("#boxshadow").html("Message3")
});

.scrolltext {
  position: relative;
  border-bottom: 2px solid black;
  letter-spacing: -15px;
  white-space: nowrap;
  line-height: 80%;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 5px;
  height: 160px;
  width: 100%;
  font-size: 200px;
  z-index: 1;
}
#talk:hover {
  background-color: white;
}
#time:hover {
  background-color: white;
}
#chat:hover {
  background-color: white;
}
#boxshadow {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid black;
  position: absolute;
  z-index: 100000000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="boxshadow"></div>
  <div class="scrolltext" id="talk">
    <p>A TALK WITH A GOOD FRIEND</p>
  </div>
  <div class="scrolltext" id="time">
    <p>A LOVELY TIME WITH A GOOD FRIEND </p>
  </div>
  <div class="scrolltext" id="chat">
    <p>A CHAT WITH A GOOD FRIEND </p>
  </div>
</div>

Answer 1

所以我认为这里发生的事情是，如果#boxshadow元素挡住了你的光标，你的光标不能悬停在div 上。因此，光标会触发框，因为它位于div 上方，然后立即不再在div 上，因为它在框上方。所以它来回翻转...永远。

若要避免这种情况，请将 css 属性pointer-events: none;添加到框中。当浏览器询问鼠标是否"超过"div时，浏览器基本上会忽略该框，这应该会停止故障。

注意：如果您希望用户能够单击框中的某些内容(显然现在不是一个选项，但我不知道您的计划是什么(，pointer-events: none点击将传递到下面的div。