CSS 鼠标悬停提示文字

最新推荐文章于 2024-07-19 13:00:00 发布

脆脆鲨_HCC

最新推荐文章于 2024-07-19 13:00:00 发布

阅读量3.3k

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_40067662/article/details/87362191

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我用title 和div 两种方法做的, 文字出现的位置根据鼠标的位置动态确定:
动态修改的话可以这样：

动态设置他的title即可

optionList += '<tr><td>' +  ((index<9?'0'+(index+1):index+1)) + '</td><td title=\"'+val.MAINTENANCE_REMARK+'\">'+val.MAINTENANCE_REMARK+'</td></tr>';



<!-- 用title 属性比较方便, 但是不灵活 -->
<table border="1">
 <tr>
  <td title="鼠标停留显示内容1">文字内容1</td>
 </tr>
</table>

<!-- 可以自己声明一个Div, 用来显示内容, 根据对鼠标位置的侦听, 动态改变Div 的位置 -->
<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>