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

更新时间：2009年10月24日 11:43:17 作者：

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>CSS伪类实现的鼠标滑动链接</title> <style> @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(//img.jbzj.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(//img.jbzj.com/demoimg/200910/nav.gif) left -33px no-repeat; } #Nav a.MediaPlay:link,#Nav a.MediaPlay:visited { text-decoration:none; background:url(//img.jbzj.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(//img.jbzj.com/demoimg/200910/nav.gif) left -99px no-repeat; } #Nav a.RealPlay:link,#Nav a.RealPlay:visited { text-decoration:none; background:url(//img.jbzj.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(//img.jbzj.com/demoimg/200910/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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

一个很简单的无限分类树实现代码
一个很简单的无限分类树实现代码，需要的朋友可以参考下。
2010-11-11
css 有弹动效果的网页导航
发了个韩国网站（www.firstkids.co.kr）给我，让我用CSS写一个类似这个网站的导航栏效果。思路是：背景图像定位！
2009-10-10
javascript仿126邮箱TAB切换效果
仿126中的绿色tab切换效果，比较漂亮
2008-09-09
CSS TreeMenu 二级树形菜单示例
二级树形菜单示例：CSS TreeMenu ，非常漂亮的树形菜单，用在网站右侧比较合适。
2010-11-11
css+js下拉菜单
js+css实现的简单的下来菜单。兼容性好。
2009-05-05
简单通用的JS滑动门代码
网上的太复杂，这样的代码比较简单
2008-12-12
javascript渐变显示的雅虎中国选项卡效果代码
javascript渐变显示的雅虎中国选项卡效果代码...
2007-10-10
利用js跨页面保存变量做菜单的方法
2008-01-01
超酷的鼠标拖拽翻页(分页)效果实现javascript代码
超酷的鼠标拖拽翻页(分页)效果实现javascript代码,非常的不错。
2009-09-09
JavaScript 下拉菜单实现代码
利用css+js实现的下拉菜单。通过getElementsByTagName获取ul,隐藏显示。
2009-05-05