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

我用title 和div 两种方法做的, 文字出现的位置根据鼠标的位置动态确定:
<!-- 用title 属性比较方便, 但是不灵活 -->
<table border="1">
 <tr>
  <td title="鼠标停留显示内容1">文字内容1</td>
 </tr>
</table>

<!-- 可以自己声明一个Div, 用来显示内容, 根据对鼠标位置的侦听, 动态改变Div 的位置 -->
<table border="1">
 <tr>
  <td οnmοuseοver="overShow()" οnmοuseοut="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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值