鼠标悬停在一个标签上时,显示一段文字的两种方法

1.使用title:如果使用title属性时很方便,但是不灵活

<table border="1">
 <tr>
  <td title="鼠标停留显示内容1">文字内容1</td>
 </tr>
</table>

2.可以监听鼠标事件onmouseover

<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>

  • 5
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是符合您要求的HTML代码: ```html <!DOCTYPE html> <html> <head> <title>四个独立块的页面</title> <style> #block1, #block2, #block3, #block4 { border: 1px solid black; padding: 20px; margin: 20px; float: left; width: 200px; height: 200px; text-align: center; } #block1:hover, #block2:hover, #block3:hover, #block4:hover { background-color: #EEE; } </style> </head> <body onclick="displayInfo(event)"> <div id="block1"> <img src="image1.jpg" alt="图片1"> <p>这是图片1</p> </div> <div id="block2"> <table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>20</td> </tr> <tr> <td>李四</td> <td>25</td> </tr> </table> <p>这是一个表格,显示了两个人的姓名和年龄</p> </div> <div id="block3"> <p>这是一段文字</p> <img src="image2.jpg" alt="图片2"> <p>这是图片2</p> </div> <div id="block4"> <table> <tr> <th>水果</th> <th>价格</th> </tr> <tr> <td>苹果</td> <td>5元/kg</td> </tr> <tr> <td>香蕉</td> <td>3元/kg</td> </tr> </table> <p>这是一个表格,显示两种水果的名称和价格</p> </div> <script> function displayInfo(event) { var target = event.target; var tagName = target.tagName; var id = target.id; alert("标记名:" + tagName + "\nID:" + id); } </script> </body> </html> ``` 解释一下代码的实现思路: 1. 首先,我们在页面上放置了四个独立的块,每个块都有自己独特的内容,包括图像、表格和文字说明。 2. 我们为每个块设置了一个ID,分别为"block1"、"block2"、"block3"和"block4"。 3. 在CSS中,我们设置了每个块的样式,包括边框、内边距、外边距、浮动、宽度、高度和文本对齐方式。 4. 我们为每个块设置了一个鼠标悬停事件,当鼠标悬停在块上时,背景颜色变为灰色。 5. 在页面底部,我们使用了一个onclick事件监听器,当用户在页面上点击鼠标时,会调用`displayInfo()`函数。 6. `displayInfo()`函数获取用户点击的对象,然后获取该对象的标记名和ID,并将它们显示一个警告框中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值