jQuery实现鼠标悬停显示提示信息窗口的方法

最新推荐文章于 2021-06-09 11:46:05 发布

weixin_30394333

最新推荐文章于 2021-06-09 11:46:05 发布

阅读量1.2k

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/sjqq/p/6388085.html

版权

 
  <!DOCTYPE html PUBLIC  
  "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
  > 
 
  <html xmlns= 
  "http://www.w3.org/1999/xhtml" 
  > 
 
  <head> 
 
  <title>鼠标悬停显示提示信息窗口</title> 
 
  <meta http-equiv= 
  "content-type" 
  content= 
  "text/html;charset=gb2312" 
  > 
 
  <style type= 
  "text/css" 
  > 
 
  .contact{width:100px;height:15px; 
 
  margin:20px 0 0 50px; padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#CCCCCC; 
 
  text-align:center; 
 
  } 
 
  .us{display:none;width:300px;height:40px; 
 
  padding:10px;position:relative;top:0px;left:50px; 
 
   padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#0099FF; 
 
  } 
 
  </style> 
 
  <script src= 
  "jquery-1.6.2.min.js" 
  ></script> 
 
  <script type= 
  "text/javascript" 
  > 
 
  $(document).ready( 
  function 
  (){ 
 
  $( 
  ".contact" 
  ).mouseover( 
  function 
  (){ 
 
  $( 
  ".us" 
  ).show( 
  "slow" 
  ); 
 
  $( 
  ".contact" 
  ).mouseout( 
  function 
  (){ 
 
  $( 
  ".us" 
  ).hide( 
  "slow" 
  ); 
 
  }); 
 
  }); 
 
  }) 
 
  </script> 
 
  </head> 
 
  <body> 
 
  <div class= 
  "contact" 
  >联系我们</div> 
 
  <div class= 
  "us" 
  >提示内容！提示内容！提示内容！</div> 
 
  <div>http: 
  //www.jb51.net/</div> 
 
  </body> 
 
  </html>

转载于:https://www.cnblogs.com/sjqq/p/6388085.html

weixin_30394333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现鼠标悬停显示提示信息窗口的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>...
复制链接

扫一扫