javascript - jquery优化标签title属性样式中遇到的bug？求帮忙
本文介绍了javascript - jquery优化标签title属性样式中遇到的bug？求帮忙的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
前两个样式没有问题 就是到第三个样式的时候 由于没有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>
解决方案
var tooltip="<div id='tooltip'>"+this.myTitle+"</div>"; //创建DIV元素
//这一步的时候，判断this.myTitle有没有值。为空就不创建不追加了。
---------------------------------------------------------------------
$("a,h3,h4,img,i").mouseover(function(e){
//这一步的时候你给你的选择器加一个属性选择器判断[title]。这样出来的时候不都是有title的那？这篇关于javascript - jquery优化标签title属性样式中遇到的bug？求帮忙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
