（3）自定义鼠标提示

最新推荐文章于 2023-07-24 16:11:17 发布

无人与我共黄昏

最新推荐文章于 2023-07-24 16:11:17 发布

阅读量1.1k

点赞数

分类专栏： JavaScript案例解析

本文链接：https://blog.csdn.net/Xuan6251237011/article/details/17059309

版权

JavaScript案例解析同时被 2 个专栏收录

42 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

JavaScript代码

42 篇文章 0 订阅

订阅专栏

<!-- 说明：有时候单单用title属性来显示文本提示语言远远不够，我们想用粗体或者斜体电费鼠标提示，或者包含图片的鼠标提示，则可以
通过创建隐藏的div标签来实现，当鼠标移动到指定目标上的时候就显示这个隐藏的div块 。此代码可灵活修改，如添加图片显示则可以在div1中加上<img/>标签等等-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title> 自定义鼠标提示，可以提示文字之外，还能提示图片等等</title>
    
    <script type="text/javascript">
 		function show(oevent){
 			var odiv= document.getElementById("div1");
 			odiv.style.visibility="visible";
 			odiv.style.left=oevent.clientX+15;
 			odiv.style.top=oevent.clientY+15;
 		}
 		
 		function hide(oevent){
 			var odiv=document.getElementById("div1");
 			odiv.style.visibility="hidden";
 		}
 
 </script>
  </head>
  <body>
  <div id="div2" style="background-color: red;height:20px; width:300px;" οnmοuseοver="show(event)" οnmοuseοut="hide(event)"></div>
		<div id="div1" style="background-color: blue;position:absolute;visibility:hidden;padding:25px;"></div>
  </body>
  
</html>

无人与我共黄昏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（3）自定义鼠标提示

 自定义鼠标提示，可以提示文字之外，还能提示图片等等
复制链接

扫一扫