如何在鼠标指针顶部移动工具提示？

Question

 let screenLog = document.querySelector('#screen-log'); document.addEventListener('mousemove', logKey); var imgHgt = document.getElementById('box'); function logKey(e) { var d = document.getElementById('TextHidden'); d.style.position = "absolute"; d.style.left = e.clientX +'px'; d.style.top = e.clientY +'px'; screenLog.innerHTML = `${e.clientX}, ${e.clientY}` + "<br>Image Height = " + imgHgt.offsetHeight + "<br>Image Width = " + imgHgt.offsetWidth; }

 #box { width: 40%; display: block; position: absolute; overflow: hidden; } .image { display: block; width: 100%; z-index: 1; } #TextHidden { display: none; color: red; font-size; 20px; z-index: 10; } #box:hover #TextHidden { display: block; } #screen-log { z-index: 11; }

 <div id="box"> <img src="https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg" class="image"></p> </img> <div id="TextHidden">Hovering<p id="screen-log"></p></div> </div>

我试图在鼠标指针的顶部移动评论，但没有成功。

Answer 1

更改您的left和top位置像素，例如，

  d.style.left = (e.clientX - 50) +'px';
  d.style.top = (e.clientY - 100) +'px';

片段如下，

 let screenLog = document.querySelector('#screen-log'); document.addEventListener('mousemove', logKey); var imgHgt = document.getElementById('box'); function logKey(e) { var d = document.getElementById('TextHidden'); d.style.position = "absolute"; d.style.left = (e.clientX - 50) +'px'; d.style.top = (e.clientY - 100) +'px'; screenLog.innerHTML = `${e.clientX}, ${e.clientY}` + "<br>Image Height = " + imgHgt.offsetHeight + "<br>Image Width = " + imgHgt.offsetWidth; }

 #box { width: 40%; display: block; position: absolute; overflow: hidden; } .image { display: block; width: 100%; z-index: 1; } #TextHidden { display: none; color: red; font-size; 20px; z-index: 10; } #box:hover #TextHidden { display: block; } #screen-log { z-index: 11; }

 <div id="box"> <img src="https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg" class="image"></p> </img> <div id="TextHidden">Hovering<p id="screen-log"></p></div> </div>

Answer 2

您的方法原则上有效，但您看不到移动的文本，因为它当前处于隐藏状态。 请注意，我注释掉了样式表中的overflow: hidden和display: none属性。

 let screenLog = document.querySelector('#screen-log'); document.addEventListener('mousemove', logKey); var imgHgt = document.getElementById('box'); function logKey(e) { var d = document.getElementById('TextHidden'); d.style.position = "absolute"; d.style.left = e.clientX + 'px'; d.style.top = e.clientY + 'px'; screenLog.innerHTML = `${e.clientX}, ${e.clientY}` + "<br>Image Height = " + imgHgt.offsetHeight + "<br>Image Width = " + imgHgt.offsetWidth; }

 #box { width: 40%; display: block; position: absolute; #overflow: hidden; } .image { display: block; width: 100%; z-index: 1; } #TextHidden { #display: none; color: red; font-size: 20px; z-index: 10; } #box:hover #TextHidden { display: block; } #screen-log { z-index: 11; }

 <div id="box"> <div id="TextHidden"> <p id="screen-log"></p> </div> </div>