×

新导航介绍,点击查看

css鼠标经过效果

发表日期:2009-06-18 摄影器材: 点击数: 投票数:
这个效果想必网络上应该有,只是我没有看到现成的,今天看到一份关于css列表的样式想到鼠标经过应该也能这么处理,于是就记录下来啦,试过效果还是不错的,啊哈


body{
font:lighter 12px '宋体';
margin:0;
color:#575757;
text-align:center;
}
a{color:#373737;text-decoration:none;height:15px;}
a:hover{color:#c30000;text-decoration:none;left:1px;top:1px;position:relative;}
img{border:none;}
ul{margin: 0px; padding: 0px; list-style-type:none; }
.line{float:center;width:960px;}
相同背景
.menu a{float:left;width:34px;height:14px;padding:3px;overflow:hidden;background:url(image/classifyB.gif) no-repeat;color:#000000;}
.menu li{float:left;width:40px;list-style: none;margin-left:3px;}
.menu a:hover{background-position: -40px 0;color:#FFFFFF;position:static;}
不同背景
.nav a{float:left;height:55px;overflow:hidden;}
.nav li{float:left;width:105px;list-style: none;margin-left:3px;}
.nav a:hover{background-position:0px -55px;position:static;}
.nav1 a {background:url(image/union.gif) no-repeat;}
.nav2 a {background:url(image/flash.gif) no-repeat;}
.nav3 a {background:url(image/news.gif) no-repeat;}
.nav4 a {background:url(image/game.gif) no-repeat;}
.nav5 a {background:url(image/bar.gif) no-repeat;}
.nav6 a {background:url(image/tb.gif) no-repeat;}


下面是页面上的htm





css鼠标经过效果










说明下:button.gif是一个空的gif图片

作者:sphil

《css鼠标经过效果》


下一篇:没有了

最 新:
没有其它新的作品了

更多sphil的POCO作品...

评论