鼠标悬浮显示提示信息(JavaScript)
时间: 2023-08-18 12:05:18 浏览: 41
要实现鼠标悬浮显示提示信息,可以使用HTML中的title属性或者JavaScript中的mouseover和mouseout事件。以下是两种实现方式的示例代码:
使用HTML的title属性:
```
<a href="#" title="这是提示信息">悬浮显示</a>
```
使用JavaScript的mouseover和mouseout事件:
HTML代码:
```
<a href="#" id="hover-link">悬浮显示</a>
```
JavaScript代码:
```
var hoverLink = document.getElementById("hover-link");
hoverLink.addEventListener("mouseover", function() {
hoverLink.setAttribute("data-tooltip", "这是提示信息");
});
hoverLink.addEventListener("mouseout", function() {
hoverLink.removeAttribute("data-tooltip");
});
```
在CSS中,可以使用data-tooltip属性定义提示信息的样式:
```
[data-tooltip] {
position: relative;
}
[data-tooltip]:before {
content: attr(data-tooltip);
position: absolute;
top: -20px;
left: 0;
padding: 5px;
background-color: #333;
color: #fff;
border-radius: 3px;
font-size: 12px;
opacity: 0;
transition: opacity 0.3s;
}
[data-tooltip]:hover:before {
opacity: 1;
}
```