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

网络编程 2025/5/12 佚名

3 2 1

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

<!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>      <ul>         <li>词霸</li>         <li>MediaPlay</li>         <li>RealPlay</li>         <li>MediaPlay</li>         <li>RealPlay</li>     </ul>  </center> </body> </html>

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

鼠标滑动,图片链接

标签：

鼠标滑动,图片链接

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“CSS 伪类实现的鼠标滑动图片链接”

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

暂无“CSS 伪类实现的鼠标滑动图片链接”评论...

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

鼠标滑动,图片链接

百度用到的Js日历大家可以看看

颜色变换像字符逐字输入的欢迎词

评论“CSS 伪类实现的鼠标滑动图片链接”

更新动态

友情链接

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

鼠标滑动,图片链接

百度用到的Js日历 大家可以看看

颜色变换 像字符逐字输入的欢迎词

评论“CSS 伪类实现的鼠标滑动图片链接”

更新动态

友情链接

百度用到的Js日历大家可以看看

颜色变换像字符逐字输入的欢迎词