WordPress,非插件實現博客Sweet Titles好看的鏈接提示

摘要：這個相信大家不陌生了,不再做過多的解釋了,上次分享過一個實現的方法WordPress,給博客超鏈接添加漂亮的Sweet Titles效果代碼版,現在給出另外一種實現的方法,兩者各有千秋,自己琢磨吧! 這個需要兩段代碼即可搞定,和上次分享的那個在樣式上基本沒多大區別,如果非要說有什麽不同的話,這個在樣式上多了個鏈接美化,僅此而已!

這個相信大家不陌生了,不再做過多的解釋了,上次分享過一個實現的方法WordPress,給博客超鏈接添加漂亮的Sweet Titles效果代碼版,現在給出另外一種實現的方法,兩者各有千秋,自己琢磨吧!

這個需要兩段代碼即可搞定,和上次分享的那個在樣式上基本沒多大區別,如果非要說有什麽不同的話,這個在樣式上多了個鏈接美化,僅此而已!

直接上代碼,因為JS代碼很短,所以直接給出了,其實在使用過程中也可以直接添加使用的,至於添加的位置,想貼哪就貼哪,你的博客你說了算,嘿嘿,代碼如下:

<script type="text/javascript" >
jQuery(document).ready(function($){
$("a").mouseover(function(e){
this.myTitle = this.title;
this.myHref = this.href;
this.myHref = (this.myHref.length > 30 ? 
this.myHref.toString().substring(0,30)+"..." :this.myHref);
this.title = "";
var tooltip = "<div id='tooltip'>
<p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
$('body').append(tooltip);
$('#tooltip').css({"opacity":"0.8",
"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
}).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
}).mousemove(function(e){$('#tooltip')
.css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
});
});
</script>

有效果自然少不了美化,下面是美化的CSS代碼,大家可以根據自己口味酌情修改,如下:

#tooltip
{
	-moz-border-radius:7px 7px 7px 7px;
	background:none repeat scroll 0 0 #000000;
	border:2px double #FFFFFF;
	min-height:1em;
	padding:5px;
	position:absolute;
	text-align:left;
	width:auto;
	z-index:1000;
}
#tooltip p
{
	color:#FFFFFF;
	font:12px verdana,arial,sans-serif;
	margin:0;
	padding:0;
}
#tooltip p em
{
	color:#00CCFF;
	display:block;
	font-style:normal;
	font-weight:700;
	margin-top:3px;
}
#tooltip p em span
{
	color:#FFFFFF;
	font-weight:700;
}