(3)自定义鼠标提示

原创 2013年12月01日 20:13:05
<!-- 说明:有时候单单用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>

相关文章推荐

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对...

C# WinForm开发系列之chart控件画折线图和柱形图并自定义鼠标移动到数据标记点显示提示信息

1.首先拖动chart控件到窗体,设置chart1的属性Legends中默认的Legend1的Enable为false; 2.设置Series的ChartType为Line 3.后台绑定数据 ...

C# WinForm开发系列之chart控件画折线图和柱形图并自定义鼠标移动到数据标记点显示提示信息

原文出自http://blog.csdn.net/dannyiscoder/article/details/70768230 1.首先拖动chart控件到窗体,设置chart1的属性...

基于jQuery的自定义鼠标右键菜单

  • 2013年03月16日 11:27
  • 74KB
  • 下载

Silverlight 自定义鼠标

  • 2012年11月20日 11:41
  • 413KB
  • 下载

GoogleMapsV3-----基础地图(自定义消息提示OverlayView)

html { height: 100%; } body { height: 100%; ...

arcgis for js自定义鼠标样式.zip

  • 2014年10月18日 13:51
  • 4KB
  • 下载

自定义鼠标手势

  • 2013年03月21日 16:50
  • 44KB
  • 下载

鼠标点击html表格表头实现表格数据自定义排序

/**  * 皮锋  表格数据自定义排序,数据按int(float、string、date)进行升序或降序排列  */ // 排序 tableId: 表的id,iCol:第几列从0开始 ;dataTy...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(3)自定义鼠标提示
举报原因:
原因补充:

(最多只允许输入30个字)