css可以定义超级链接a标签里面的title的样式吗？该如何处理
日期：2014-05-17 浏览次数：20692 次
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写的， 你看看是不是你想要的那种效果， 提示框的样式可以自己更改的。。
------解决方案--------------------
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
