div鼠标放上去后显示提示文字
时间: 2023-08-06 09:07:45 浏览: 66
可以利用div标签的title属性来实现鼠标放上去后显示提示文字。例如:
```
<div title="这是要显示的提示文字">鼠标放上来试试</div>
```
当鼠标放在div上时,就会显示出"title"属性中的文字。需要注意的是,这里的提示文字会覆盖掉div中原有的内容,所以如果需要在div中显示提示文字,可以将文字放在div中,并使用CSS样式来实现隐藏和显示。例如:
```
<div class="tooltip">鼠标放上来试试
<span class="tooltiptext">这是要显示的提示文字</span>
</div>
```
CSS样式:
```
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
```
这样,鼠标放在div上时,会显示出提示文字,同时原有的内容也会保留。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)