使用Jquery 和CSS定义 a title的样式(附其他方法) - 源于生活

[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>

[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>