鼠标悬停在一个标签上时，显示一段文字

最新推荐文章于 2024-11-01 11:17:55 发布

王爷的大房子

最新推荐文章于 2024-11-01 11:17:55 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yang-xiansen/p/10282145.html

本文介绍了两种在HTML中实现提示信息的方法：一是通过title属性直接显示提示文本；二是利用JavaScript监听鼠标事件，动态创建和显示提示信息。第一种方法简单易用，适用于静态提示；第二种方法更灵活，能实现动态和定制化的提示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用title属性

<div title="显示文字">
  <p>显示</p>
</div>

2.使用监听鼠标事件onmouseover

<table border="1">
 <tr>
  <td onmouseover="overShow()" onmouseout="outHide()">文字内容2</td>
 </tr>
</table>
<div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
<script>
 function overShow() {
  var showDiv = document.getElementById('showDiv');
  showDiv.style.left = event.clientX;
  showDiv.style.top = event.clientY;
  showDiv.style.display = 'block';
  showDiv.innerHTML = '鼠标停留显示内容2';
 }
 
 function outHide() {
  var showDiv = document.getElementById('showDiv');
  showDiv.style.display = 'none';
  showDiv.innerHTML = '';
 }
</script>