Html a：悬停颜色不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16967118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
a:hover color is not working
提问by Aman Gupta
a very strange thing..
很奇怪的事情..
I want to change the text color and background color of the links when hovered.
我想在悬停时更改链接的文本颜色和背景颜色。
this is the code
这是代码
css:
css：
#link-menu a
{
color:white;
display:block;
height:100%;
width: 100%;
text-decoration:none;
text-align:center;
line-height:45px;
font-weight:bold;
font-family:"trebuchet ms","comic sans ms";
outline:none;
}
.link2 a:hover
{
color:black;
background:white;
}
its not that the hover is not working. background color is changing but the text color is not changing.
这不是悬停不起作用。背景颜色在变化，但文本颜色没有变化。
one more imortant fact is that if instead of using the class .link2 , i use an id, color also changes. The issue is with using class only. Can somebody please explain the reason and the solution?
一个更重要的事实是，如果我不使用 .link2 类，而是使用一个 id，颜色也会发生变化。问题在于仅使用类。有人可以解释原因和解决方案吗？
Note: i dont want to use the parent element id. because i dont want to change background of all links.
注意：我不想使用父元素 ID。因为我不想改变所有链接的背景。
回答by adrift
Its a specificityissue; your first selector is overriding the second because it has an ID. Your only option is using an !importantrule or including the parent as an ancestor in your second selector so its more specific, e.g.
它是一个特殊性问题；您的第一个选择器会覆盖第二个选择器，因为它有一个 ID。您唯一的选择是使用!important规则或在您的第二个选择器中包含父项作为祖先，以便它更具体，例如
#link-menu a:hover {
background: white;
color: black;
}
回答by Erlik
#link-menu a
Has higher priority. You need to increase priority of the second selector. Try adding !important
具有更高的优先级。您需要提高第二个选择器的优先级。尝试添加 !important
.link2 a:hover
{
color:black !important;
background:white;
}
回答by SLaks
#link-menu ais more specific than .link2 a:hover, because the first one includes an ID and the second one doesn't.
#link-menu a比 更具体.link2 a:hover，因为第一个包含 ID，而第二个不包含。
Therefore, it overrides properties in the second rule.
因此，它会覆盖第二条规则中的属性。
To fix this, change them so they both have the same specificity (before the :hover), or add !important.
要解决此问题，请更改它们以使它们具有相同的特异性（在 之前:hover），或添加!important.
