日期:2014-05-17  浏览次数:20642 次

css可以定义超级链接a标签里面的title的样式吗?
<a href="url" title="内容">

就是我想定义title显示的内容的背景图片或者背景颜色或者边框什么的?可以实现吗?

------解决方案--------------------
直接给title加样式是不行的。你可以通过onmouseover事件来show一个内容为title的自定义box给这个box啦定义样式。
------解决方案--------------------
<style>
#tooltip{border:1px solid red; background:#FF6;
position:absolute;
padding:1px;
color:#333;
display:none;

}
</style>
<script type="text/javascript" src="scripts/jquery-1.7.1.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> 
jq写的, 你看看是不是你想要的那种效果, 提示框的样式可以自己更改的。。
------解决方案--------------------
CSS code
<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>