你的位置:| 首页网站建设鼠标放上去变换背景图案效果的CSS→文章正文  
文章导航


鼠标放上去变换背景图案效果的CSS

html部分:就是做个列表
<div id="top_a_menu">
<ul>
<li><a href="#" 首页</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">留言</a></li>
</ul>
</div>

css部分:
#top_a_menu ul {
list-style-type: none;
}
#top_a_menu li {
float: left;
display: block;
width: 60px;
height: 31px;
margin: 2px;6px;2px;10px;
line-height: 31px;
text-align: center;
background-repeat: repeat-x;
border: 1px solid #FFFFFF;
}
上面这些都是你根据自己的需要设的。

换背景在于定义a和a:hover
#top_a_menu a {
background-image: url(../images/a.gif);/*括号里换成你背景图片的路径,这是鼠标没有过去时候的*/
display: block;
background-repeat: repeat-x;/*背景图片的重复方式,如果你一定要用一张合适尺寸的图片就不用设这个了*/
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

#top_a_menu a:hover{
background-image: url(../images/b.gif););/*括号里换成你背景图片的路径,这是鼠标过去时候的*/
display: block;
background-repeat: repeat-x;
}

当然背景图要两张不一样的,这个是换背景图片,如果只是换颜色你就把背景图片那儿改成颜色设置就行了


  上一页 1 2 3 4 5 下一页