用javascript 当mouseover 悬停在一个td里的内容时显示一段文字

来源:互联网 发布:mysql删除表某字段 编辑:程序博客网 时间:2024/05/10 16:25
我用title 和div 两种方法做的, 文字出现的位置根据鼠标的位置动态确定:<!-- 用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>
0 0
原创粉丝点击