如何在鼠标移动时移动工具提示？

Question

我只能悬停工具提示，但工具提示不会随着鼠标移动而移动。

 const tooltip = document.querySelector('.toolhere + section'); window.onmousemove = function(e) { const x = (e.clientX + 3) + 'px', y = (e.clientY + 3) + 'px'; for (var i = 0; i < tooltip.length; i++) { tooltip[i].style.top = y; tooltip[i].style.left = x; } };

 .toolhere { position: relative; } .toolhere+section { display: none !important; background-color: #ECECEC; color: #4D4E53; padding: 4px 8px 4px 9px; font-size: 12px; } .toolhere:hover+section { display: block !important; position: fixed; }

 <div class="items"> <div class="sub-content"> <div class="iconsize toolhere"> <img src="https://via.placeholder.com/100.jpg" /> </div> <section class="tooltip">this is tooltip</section> </div> <div class="sub-content"> <div class="content-name toolhere"></div> <section class="tooltip">this is tooltip</section> </div> </div>

Answer 1

querySelector的返回值不是数组，不能遍历

请改用querySelectorAll

 const tooltip = document.querySelectorAll('.toolhere + section'); window.onmousemove = function(e) { const x = (e.clientX + 3) + 'px', y = (e.clientY + 3) + 'px'; for (var i = 0; i < tooltip.length; i++) { tooltip[i].style.top = y; tooltip[i].style.left = x; } };

 .toolhere { position: relative; } .toolhere+section { display: none !important; background-color: #ECECEC; color: #4D4E53; padding: 4px 8px 4px 9px; font-size: 12px; } .toolhere:hover+section { display: block !important; position: fixed; }

 <div class="items"> <div class="sub-content"> <div class="iconsize toolhere"> <img src="pic.png"/> </div> <section class="tooltip">this is tooltip</section> </div> <div class="sub-content"> <div class="content-name toolhere"></div> <section class="tooltip">this is tooltip</section> </div> </div>

Answer 2

您已经使用querySelector()方法来访问 DOM 元素。 此方法用于访问单个元素。

querySelectorAll()方法用于访问与 CSS 查询匹配的所有元素。 querySelectorAll()方法返回一个NodeList 。

在下面的这个片段中，使用了forEach循环。 由于querySelectorAll()选择的 NodeList 具有类似数组的结构，因此您可以直接对其应用forEach方法并将元素作为回调函数中的第一个元素传递

 let tooltips = document.querySelectorAll('.toolhere + section'); document.addEventListener("mousemove", function(e) { const posX = `${e.clientX + 3}px`; const posY = `${e.clientY + 3}px`; tooltips.forEach((tooltip) => { tooltip.style.top = posY; tooltip.style.left = posX; }); });

 .toolhere { position: relative; } .toolhere+section { opacity: 0; width: fit-content; position: fixed; font-family: sans-serif; background-color: #ECECEC; color: #4D4E53; border-radius: 5px; padding: 4px 8px 4px 9px; font-size: 12px; transition: opacity .5s; } .toolhere:hover+section { opacity: 1; }

 <div class="items"> <div class="sub-content"> <div class="iconsize toolhere"> <img src="https://media.istockphoto.com/photos/positive-man-celebrating-success-picture-id1221837116?k=20&m=1221837116&s=612x612&w=0&h=HfTeaCWySduic6zF3kC-jGjWq_JgQUc5BtBjdCzBQzU=" /> </div> <section class="tooltip">this is tooltip</section> </div> <div class="sub-content"> <div class="content-name toolhere"></div> <section class="tooltip">this is tooltip</section> </div> </div>