跟随鼠标弹出的提示框的js代码
时间: 2023-04-12 09:00:19 浏览: 116
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
我可以回答这个问题。以下是一个简单的跟随鼠标弹出提示框的 JavaScript 代码:
```javascript
var tooltip = document.createElement('div');
tooltip.style.position = 'absolute';
tooltip.style.background = '#fff';
tooltip.style.border = '1px solid #ccc';
tooltip.style.padding = '10px';
tooltip.style.display = 'none';
document.body.appendChild(tooltip);
document.addEventListener('mousemove', function(event) {
tooltip.style.left = event.pageX + 'px';
tooltip.style.top = event.pageY + 'px';
});
var elements = document.querySelectorAll('[data-tooltip]');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('mouseover', function(event) {
tooltip.innerHTML = this.getAttribute('data-tooltip');
tooltip.style.display = 'block';
});
elements[i].addEventListener('mouseout', function(event) {
tooltip.style.display = 'none';
});
}
```
这段代码创建了一个 `div` 元素作为提示框,并将其添加到页面中。然后,它监听 `mousemove` 事件来跟随鼠标移动,并在需要时显示提示框。每个需要提示框的元素都应该有一个 `data-tooltip` 属性,其值将作为提示框的内容。当鼠标悬停在这些元素上时,提示框将显示。
阅读全文