0

I have a basic menu bar not unlike the SO one next to the logo (so questions, tags etc.). I have all the styling, but it changes when I add links in. This is hard to explain, so here is my menubar styling:

div.menubar ul
{
background-color:#FF0000;
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
div.menubar li
{
display:inline;
margin:0;
padding:0;
}
div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:link, div.menubar a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#FF0000;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}

And the menubar code:

<div class = "menubar">
<ul>
<li><a href="home.php">Home</a></li><!--does not work-->
<li><a href="#news">News</a></li><!--works-->
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>

When the link href is something like #home the link background changes to green on mouseover. However, when the link href is home.php, nothing happens. Why is this happening?

4

3 回答 3

2

作为快速修复，将悬停状态移动到 CSS 的底部。

从长远来看，看看 CSS 的特殊性，确保你没有用更“重要”的东西覆盖你的悬停状态

在这里小提琴：http: //jsfiddle.net/mq7n3/

将此移至底部

div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}
于 2013-10-15T12:42:54.213 回答
0 
div.menubar a:hover //this is overridden by below rule, div.menubar a:active //This works
{
    background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:link{ //this is overriding div.menubar a:hover
    background-color:#FF0000;
}

尝试将规则放在:hover规则之后:link，删除:link（是否有必要？），或添加!important到:hover规则中（不推荐）。

于 2013-10-15T12:46:14.513 回答
0

您可以删除一行代码以使其正常工作

div.menubar a:link, div.menubar a:visited
{
font-weight:bold;
color:#FFFFFF;
/*   background-color:#FF0000;           REMOVED  */
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}

看到它工作

如果您的锚标签有 # 或没有，这有效（尽管不知道为什么在原始问题上）

于 2013-10-15T12:51:18.390 回答