Question

我有一个基本菜单栏，与徽标旁边的SO不同（所以问题，标签等）。我有所有的样式，但是当我添加链接时它会发生变化。这很难解释，所以这是我的菜单栏样式：

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;
}

菜单栏代码：

<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>

当链接href类似#home时，链接背景在鼠标悬停时变为绿色。但是，当链接href为home.php时，没有任何反应。为什么会这样？

Answer 1

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

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

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

将其移至底部

div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}

Answer 2

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规则（不推荐）。

Answer 3

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

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;
}

See it working

如果你的锚标签有＃或没有＃（虽然不知道为什么原始问题）

，这是有效的

菜单栏CSS随链接而变化

3 个答案: