附加到光标的故障 div

Question

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

我已经将光标连接到鼠标上，但是当我将鼠标悬停在任何框（悬停时也会变成白色）时，div 和框 "glitch" 真的难的。我假设这与 z-index 有关系，但我想不通。

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; 添加到框中。当浏览器询问鼠标是否为 "over" 或 div 时，它基本上会忽略该框，这应该会停止故障。

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

附加到光标的故障 div

Glitchy div attached to cursor

javascript

css

cursor