jquery做的一个onmouse出tips帮助文档的一个效果

最新推荐文章于 2020-07-05 15:56:07 发布

aw3423zsddf

最新推荐文章于 2020-07-05 15:56:07 发布

阅读量135

点赞数

分类专栏： jquery 相关文章标签： jQuery CSS Ajax JavaScript XHTML ViewUI

本文链接：https://blog.csdn.net/aw3423zsddf/article/details/83560575

版权

jquery 相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>测试</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <style>
  .tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:200px; } 
  .tool-title{ font-size:13px; font-weight:bold; margin: 0; color: #9FD4FF;
  text-align: center; padding: 6px 6px 4px;
 background-color:#666;/*tips标题的背景*/
  } 
  .tool-text{
  padding: 4px 8px 8px; font-size:12px; color: #cf9; 
 background-color:#999;/*tips内容的背景*/
  }
  </style>
   </head>
    <body>
    <script> $(document).ready(function(){
$('<div class="tool-tips"><div class="tool-title"></div><div class="tool-text"></div></div>').appendTo('body'); //添加tips节点
$('abbr,acronym').mouseover(function(){  //添加onmouse的事件,可改为其他事件如click等
$(this).css('cursor','help'); //添加样式
$('.tool-tips').css('visibility','visible'); //可见
var tip = this;
if(tip.title){tip.arrs=tip.title;tip.title='';}
var arr = tip.arrs.split('｜');//分割
if(arr.length>1){ myTitle = arr[0]; myText = arr[1]; 
}else{ myTitle = $(this).text(); myText = tip.arrs; }
$('.tool-title').html(myTitle); //为tips节点加标题
$('.tool-text').html(myText); //加内容
}).mousemove(function(e){ $('.tool-tips').css('top',e.pageY+15);
$('.tool-tips').css('left',e.pageX+15); }).mouseout(function(){ $('.tool-tips').css('visibility','hidden'); })
}) 
</script>
<abbr title="测试的内容">测试</abbr><br/>
<abbr title="this is content">test</abbr><br/>
<abbr title="巅峰网络公司专注于：网站建设、网站设计、网站优化(SEO)、网络推广、品牌网站建设、网页设计 
">巅峰网络,http://www.tipnet.cn</abbr><br/>
 <acronym title="Cascading Style Sheets">CSS</acronym> 
    
</body>
 </html>

运行效果