0

所以我只是想制作一个简单的导航栏菜单，当你将鼠标悬停在它上面时，它下面有一个 4px 的边框。这本身并不难，但我试图对其进行样式设置，以便不同的菜单元素具有不同的颜色。这就是我到目前为止所拥有的：

HTML

    <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About</a></li>
<li><a href="#" class="portfolio">Portfolio</a></li>

</ul>
</div>

CSS

/*Menu*/

#navlist
{
margin: 0;
padding: 0 0 20px 10px;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#navlist a:hover { color: #000; }

#navlist  li .home {
color: #d43f3f;
}

#navlist li .home a:hover
{
border-bottom: 4px solid #d43f3f;
padding-bottom: 2px;
background: transparent;
color: #d43f3f;
}
#navlist li .about {
color: #00ace9;
}

#navlist  li .about a:hover
{
border-bottom: 4px solid #00ace9;
padding-bottom: 2px;
background: transparent;
color: #00ace9;
}
#navlist li .portfolio {
color: #6a9a19;
}

#navlist li .portfolio a:hover
{
border-bottom: 4px solid #6a9a19;
padding-bottom: 2px;
background: transparent;
color: #6a9a19;
}

它显示不同的颜色，但悬停功能不适用于我的 4px 边框... :(

4

2 回答 2

1

这真的很简单。您的 CSS 中有两个声明。

#navlist li .portfolio a:hover {

.portfolio是a元素。您使用的声明暗示：awhich is child of .portfoliowhich is child of liwhich is child of #navlist. 你走得太深了。

这将起作用：

#navlist li a.portfolio:hover {

工作小提琴：http: //jsfiddle.net/jnbBz/1/

完全更正的 CSS：

/*Menu*/

#navlist
{
margin: 0;
padding: 0 0 20px 10px;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#navlist a:hover { color: #000; }

#navlist  li .home {
color: #d43f3f;
}

#navlist li .home:hover
{
border-bottom: 4px solid #d43f3f;
padding-bottom: 2px;
background: transparent;
color: #d43f3f;
}
#navlist li .about {
color: #00ace9;
}

#navlist  li .about:hover
{
border-bottom: 4px solid #00ace9;
padding-bottom: 2px;
background: transparent;
color: #00ace9;
}
#navlist li .portfolio {
color: #6a9a19;
}

#navlist li a.portfolio:hover
{
border-bottom: 4px solid #6a9a19;
padding-bottom: 2px;
background: transparent;
color: #6a9a19;
}
于 2013-02-28T23:49:56.843 回答
1

你的选择器错了

#navlist li .about应该是#navlist li a.about例如

于 2013-02-28T23:55:45.527 回答