赋予代码灵魂 , 追求极致性能

Hey guys, Here is Vtrois's Blog !

wordpress添加title属性的鼠标气泡悬浮窗

鼠标停留在有title属性元素上的时候或有提示的时候,默认的效果不美观可以采用以下三种效果代码美化下。

1.将css代码加入主题css样式文件

效果一

#pre_a{background:#000;color:#FFF;text-align:center;margin-top:30px;margin-left:-100px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #333;border:1px dashed #FFF;padding:3px 8px;font-size:12px;border-radius:6px;width:200px;word-wrap:break-word}

效果二

#pre_a{
position:absolute;
z-index:1000;
width:255px;
background:#fff;
padding:10px;
border:1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow:0px 0px 3px #333;
-moz-box-shadow:0px 0px 3px #333;
box-shadow:0px 0px 3px #333;
text-align:center;
}

效果三

#pre_a{
position: absolute;
color: #fff;
padding: 5px;
background: #8EC1DA;
-moz-box-shadow: 0px 0px 5px #8EC1DA;
-webkit-box-shadow: 0px 0px 5px #8EC1DA;
box-shadow: 0px 0px 5px #8EC1DA;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 5px;
text-align: center;
text-shadow: 1px 1px 1px #888888;
z-index:1000
}

 

2.在主题中加载js代码(一定要确保是在JQ库的后面加载)

$(document).ready(function(){(function(){$(“a”).each(function(m){if(this.title){var c=this.title;var a=30;$(this).mouseover(function(d){this.title=””;$(“body”).append(‘<div id=”pre_a”>’+c+”</div>”);$(“#pre_a”).css({left:(d.pageX+a)+”px”,top:d.pageY+”px”,opacity:”0.7″}).fadeIn(250)}).mouseout(function(){this.title=c;$(“#pre_a”).remove()}).mousemove(function(d){$(“#pre_a”).css({left:(d.pageX+a)+”px”,top:d.pageY+”px”})})}})})();});

 

点赞

发表评论

电子邮件地址不会被公开。