Question

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

我已经将光标连接到鼠标上，但是当我将鼠标悬停在任何一个盒子上时（当盘旋时它也会变成白色），div和盒子会出现故障＆＃34;故障＆＃34;真的很难。我认为这必须对z-index做一些事情，但我无法弄明白。

＆＃13;

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")
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

所以我认为这里发生的事情是，如果#boxshadow元素阻碍了你的光标无法悬停在div上。所以光标会触发该框，因为它超过div，然后立即不再超过div，因为它超过了框。所以它来回......永远。

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

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

Glitchy div附加到光标

1 个答案: