您的位置：首页 > Web前端 > CSS

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

2011-05-21 09:40 495 查看

代码简介：

CSS伪类实现的鼠标滑动链接，是一个图片导航，在早期的DW中有专一制作本效果的插件，不过随着大家CSS水平的提高，现在做出这种效果好像得心应手了，因为这种果大家应该都挺喜欢的。

代码内容：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS伪类实现的鼠标滑动图片链接_网页代码站(www.webdm.cn)</title>
<style>
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://www.webdm.cn/images/20100419/nav.gif) left top no-repeat;
}

#Nav a.Dict:hover,#Nav a.Dict:active {
text-decoration:none;
font-weight:bold;
background:url(http://www.webdm.cn/images/20100419/nav.gif) left -33px no-repeat;
}

#Nav a.MediaPlay:link,#Nav a.MediaPlay:visited {
text-decoration:none;
background:url(http://www.webdm.cn/images/20100419/nav.gif) left -66px no-repeat;
}

#Nav a.MediaPlay:hover,#Nav a.MediaPlay:active {
text-decoration:none;
font-weight:bold;
background:url(http://www.webdm.cn/images/20100419/nav.gif) left -99px no-repeat;
}

#Nav a.RealPlay:link,#Nav a.RealPlay:visited {
text-decoration:none;
background:url(http://www.webdm.cn/images/20100419/nav.gif) left -132px no-repeat;
}

#Nav a.RealPlay:hover,#Nav a.RealPlay:active {
text-decoration:none;
font-weight:bold;
background:url(http://www.webdm.cn/images/20100419/nav.gif) left -165px no-repeat;
}
</style>

</head>
<body>
<center>
<div id="Nav">
<ul>
<li><a class="Dict" href="#">词霸</a></li>
<li><a class="MediaPlay" href="#">MediaPlay</a></li>
<li><a class="RealPlay" href="#">RealPlay</a></li>
<li><a class="CodeFans" href="#">MediaPlay</a></li>
<li><a class="RealPlay" href="#">RealPlay</a></li>
</ul>
</div>
</center>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/1c7dd0dc-803b-4fc9-bba1-aa546db2feb8.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航