前两个样式没有问题 就是到第三个样式的时候 由于没有title属性和属性值,但是上面依然会有个蓝块,如何把这个蓝块去掉?
正常效果:
bug:
代码如下:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>A Pen by exuan</title>
</head>
<body>
<style>
#tooltip{position:absolute;z-index:9999;display:none;padding:4px 8px;border:1px solid rgba(255,255,255,0.25);border-radius:3px;background-color:#0c0;color:#fff;text-align:center;font-size:16px;}
#tooltip:before{position:absolute;top:-6px;left:15px;width:0;height:0;border:6px dashed #0c0;border-top:0;color:#fff;content:' ';line-height:0;border-bottom-style:solid;border-left-color:transparent;border-right-color:transparent;}
</style>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
if (this.title) {
var x=-15;
var y=32;
$("a,h3,h4,img,i").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.myTitle+"</div>"; //创建DIV元素
$("body").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>
</script>
<title>jquery优化标签title属性样式</title>
</head>
<body>
<div id="link">
<p><a href="#" class="tooltip" title="jquery优化标签title属性样式">样式一</a></p>
<p><a href="#" title="默认的title样式">样式二</a></p>
<p><a href="#" class="t1">样式3</a></p>
</div>
</body>
</html>