关闭

(3)自定义鼠标提示

863人阅读 评论(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;" onmouseover="show(event)" onmouseout="hide(event)"></div>
		<div id="div1" style="background-color: blue;position:absolute;visibility:hidden;padding:25px;"></div>
  </body>
  
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:228846次
    • 积分:4697
    • 等级:
    • 排名:第6160名
    • 原创:232篇
    • 转载:8篇
    • 译文:0篇
    • 评论:16条
    博客专栏