CSS 伪类实现的鼠标滑动图片链接

下面的代码用到上面的图片，大家注意保存下。

CSS伪类实现的鼠标滑动链接

@charset "utf-8";
/* CSS Document For www.jb51.net*/
body {
text-align:center;
font-size:12px;
color:#777777;
font-family:Verdana, Arial, Verdana, sans-serif,"宋体";
background-color:#FFFFFF;
margin:0;
padding:0;
}
#Nav {
margin:0;
float:left;
padding:5px 5px;
text-align:center;
width:280px;
border:1px solid #777777;
}

#Nav ul {
margin:0;
padding:0;
list-style-type:none;
}

#Nav li {
float:left;
margin:0;
width:130px;
height:33px;
margin-left:5px;
padding:0;
}

#Nav a {
display:block;
width:130px;
height:33px;
line-height:33px;
}

#Nav a.Dict:link,#Nav a.Dict:visited {
text-decoration:none;
background:url(http://zsrimg.ikafan.com/demoimg/200910/nav.gif) left top no-repeat;
}

#Nav a.Dict:hover,#Nav a.Dict:active {
text-decoration:none;
font-weight:bold;
background:url(http://zsrimg.ikafan.com/demoimg/200910/nav.gif) left -33px no-repeat;
}

#Nav a.MediaPlay:link,#Nav a.MediaPlay:visited {
text-decoration:none;
background:url(http://zsrimg.ikafan.com/demoimg/200910/nav.gif) left -66px no-repeat;
}

#Nav a.MediaPlay:hover,#Nav a.MediaPlay:active {
text-decoration:none;
font-weight:bold;
background:url(http://zsrimg.ikafan.com/demoimg/200910/nav.gif) left -99px no-repeat;
}

#Nav a.RealPlay:link,#Nav a.RealPlay:visited {
text-decoration:none;
background:url(http://zsrimg.ikafan.com/demoimg/200910/nav.gif) left -132px no-repeat;
}

#Nav a.RealPlay:hover,#Nav a.RealPlay:active {
text-decoration:none;
font-weight:bold;
background:url(http://zsrimg.ikafan.com/demoimg/200910/nav.gif) left -165px no-repeat;
}

• 词霸
• MediaPlay
• RealPlay
• MediaPlay
• RealPlay

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]