下面的代码用到上面的图片，大家注意保存下。 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://files.jb51.net/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://files.jb51.net/demoimg/200910/nav.gif) left -33px no-repeat; } #Nav a.MediaPlay:link,#Nav a.MediaPlay:visited { text-decoration:none; background:url(http://files.jb51.net/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://files.jb51.net/demoimg/200910/nav.gif) left -99px no-repeat; } #Nav a.RealPlay:link,#Nav a.RealPlay:visited { text-decoration:none; background:url(http://files.jb51.net/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://files.jb51.net/demoimg/200910/nav.gif) left -165px no-repeat; } 词霸 MediaPlay RealPlay MediaPlay RealPlay [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　JavaScript 事件的一些重要说明

1，JavaScript异步回调 复制代码 代码如下: <script language="javascript"> //注册回调函数loaded到处理函数window.onload上 window.onload = loaded; //把方法window.alert地址传递给show函数 var show = window>>>详细阅读

本文标题：CSS 伪类实现的鼠标滑动图片链接

地址：http://www.17bianji.com/kaifa2/JS/27849.html

 1/2    1