Glitchy div attached to cursor

Question

I am trying to attach a div to the cursor. The div only appears when it is over a specific box, and depending on the box it hovers over it is populated with an html message.

I've got the cursor attached to the mouse, but when I hover over any of the boxes (which also turn white when hovered over,) the div and the box "glitch" really hard. I assume this has to do something with the z-index, but I can't figure it out.

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

So I think what's happening here is that your cursor can't be hovering over the div if the #boxshadow element is in the way. So the cursor triggers the box because it's over the div, then immediately isn't over the div anymore because it's over the box. So it's flipping back and forth... forever.

To avoid this, add the css property pointer-events: none; to the box. The browser will basically ignore the box when it's asking whether the mouse is "over" the div, and that should stop the glitching.

NB: If you want the user to be able to click on something in the box (obviously not an option right now, but I don't know what your plans are), with pointer-events: none the click will pass through to the div below.