使用Jquery 和CSS定义 a title的样式(附其他方法)

vingoo · 发表于 2017-2-18 18:16:21

Jquery + CSS 方法

[HTML] 纯文本查看 复制代码

<style>
#tooltip{border:1px solid red; background:#FF6;
position:absolute;
padding:1px;
color:#333;
display:none;

}
</style>
<script src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";   //创建DIV元素
$("#link").append(tooltip); 	//追加到文档中
$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show();	//设置X  Y坐标， 并且显示
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();    //移除
}).mousemove(function(e){
$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"});
})
})
</script>
<title>超链接提示效果</title>
</head>

<body>
<div id="link">
<p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
    <p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>
    <p><a href="#" title="这是我的超链接提示1">自带提示1</a></p>
    <p><a href="#" title="这是我的超链接提示2">自带提示2</a></p>
</div>
</body>

vingoo · 发表于 2017-2-18 18:18:14

纯CSS方法:

[HTML] 纯文本查看 复制代码

<style type="text/css">
a {position:relative;}
a:hover:before {position:absolute;top:20px;right:0;content:attr(title);color:#000000;border:1px solid #242424;background-color:#E5E5E5;}
</style>
<a href="#" title="获取这里的文字">文字链接颜色</a>

		自动登录	找回密码
密码			免费注册

[Jquery] 使用Jquery 和CSS定义 a title的样式(附其他方法)