Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > jQuery防默认的A锚点鼠标悬停title提示
隐藏/显示侧边栏

jQuery防默认的A锚点鼠标悬停title提示

2014-08-13 12:07    来源:未知    责任编辑:admin    字号【
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery自定义鼠标提示</title>
<!--   从google上引入jQuery -->
<script src="jquery-1.8.3.js" type="text/javascript"></script>

<style type="text/css">
body{margin:0;padding:40px;background:#fff;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;}
p{clear:both;margin:0;padding:.5em 0;}
#tip{position:absolute;border:1px solid #333;background:#f7f5d1;padding:1px;color:#333;display:none;}
</style>

<script type="text/javascript">
$(function(){
   $(".tip").mouseover(function(){
      newTitle=this.title;//保存当前title
      this.title="";//清除当前title 防止默认的title提示
      var $tip=$("<div id='tip'>"+newTitle+"</div>");
      $("body").append($tip);
      $("#tip").show("fast");
   }).mouseout(function(){
      $("#tip").remove();
      this.title=newTitle;//重新赋值
   }).mousemove(function(e){
      $("#tip").css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"})
   })
})
</script>

</head>
<body>
<p><a href="#" class="tip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
</body>
</html>


jQuery防默认的A锚点鼠标悬停title提示!!!温馨提示:记得引入jQuery看效果!

更多
Tags 标签:
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |