rollover list

westwin

于 2012-05-19 17:59:37 发布

阅读量168

点赞数

分类专栏： javascript/html

本文链接：https://blog.youkuaiyun.com/westwin/article/details/84220455

版权

javascript/html 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用纯CSS实现的垂直导航菜单案例。通过将a元素转换为块级元素并利用:hover伪类交换背景颜色，实现了鼠标悬停效果。示例代码展示了如何设置样式以创建一个具有现代感的导航条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://css.maxdesign.com.au/listamatic/vertical08.htm

Comments: Rollovers can be achieved by converting the a elements within the list to blocks using display: block; and swapping background colors using the a:hover pseudo-class

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}