(3)自定义鼠标提示

<!-- 说明:有时候单单用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>

你可能感兴趣的:((3)自定义鼠标提示)