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

2024-09-05 12:20:29

字体：大中小

来源：转载

供稿：网友

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

<html><head><title>CSS伪类实现的鼠标滑动链接</title><style>@charset "utf-8";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(/jscss/demoimg/200910/nav.gif) left top no-repeat;}#Nav a.Dict:hover,#Nav a.Dict:active {text-decoration:none;font-weight:bold;background:url(/jscss/demoimg/200910/nav.gif) left -33px no-repeat;}#Nav a.MediaPlay:link,#Nav a.MediaPlay:visited {text-decoration:none;background:url(/jscss/demoimg/200910/nav.gif) left -66px no-repeat;}#Nav a.MediaPlay:hover,#Nav a.MediaPlay:active {text-decoration:none;font-weight:bold;background:url(/jscss/demoimg/200910/nav.gif) left -99px no-repeat;}#Nav a.RealPlay:link,#Nav a.RealPlay:visited {text-decoration:none;background:url(/jscss/demoimg/200910/nav.gif) left -132px no-repeat;}#Nav a.RealPlay:hover,#Nav a.RealPlay:active {text-decoration:none;font-weight:bold;background:url(/jscss/demoimg/200910/nav.gif) left -165px no-repeat;}</style></head><body><center><div id="Nav">	<ul>		<li>词霸</li>		<li>MediaPlay</li>		<li>RealPlay</li>		<li>MediaPlay</li>		<li>RealPlay</li>	</ul></div></center></body></html>

上一篇：滑动菜单，Tab，选项卡，横向，竖向都有

下一篇：图片交换技术制作CSS鼠标悬停菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注