html
css代碼
*– 左側–*/
ul#social li {
顯示:內聯;
}
a.rss {
顯示:內聯塊;
寬度:104px;
高度:35px;
左邊距:5px;
背景:url(images/rss.png) 無重複;
}
a.facebook、a.twitter、a.digg、a.delicious、a.stumble {
顯示:內聯塊;
寬度:40px;
高度:35px;
頂部邊距:1px;
}
a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a. delicious:hover, a.stumble:hover {
背景-位置:1px 1px; /* 簡單的CSS 懸停效果*/
}
a.facebook {
background: url (images/facebook.png) no-repeat;
}
a.twitter {
背景:url(images/twitter.png) 不重複;
}
a.delicious {
背景:url(images/delicious.png) no-repeat;
}
a.digg {
背景:url(images/digg.png) 不重複;
}
a.stumble {
背景:url(images/stumble.png) no-repeat;
}
.tip {
位置:絕對; /* 重要*/
top: -75px;
寬度:250px;
高度:78px;
背景:url(images/tip.png) 無重複;
浮動>浮動:左;
顯示:無;
}
/* 圖示的自訂距離*/
#tipfacebook {
left: 75px;
}
#tiptwitter {
左:120px;
}
#tipdelicious {
左:165px;
}
左:165px;
}
左:🎜> 210px;
}
#tipstumble {
左:255px;
}
.tip ul {
內邊距:22px 0 0 25px; >}
.tip ul li {
顯示:內聯;
左內邊距:3px;
}
.tip ul li a {
字體大小:18px;
顏色:#989898;
}
.tip ul li a:hover {
顏色:#666;
}
. tip ul li 小{
字型大小:10px;
}
jquery程式碼
//滑鼠移到清單元素上時顯示工具提示
$(“ul #social li”).hover(function() {
$(this).find(“div”).fadeIn(“fast”).show(); //為IE 添加'show()'
$(this).mouseleave(function () { //當滑鼠移開元素時隱藏工具提示
$(this).find(“div”).hide();
});
OK好了,我們的jquery實作工具列與網頁浮動工具條jQuery實作方法就講完了。
?>