Html a：悬停不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10065170/
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 not working
提问by saplingPro
HTML
HTML
<table width="100%">
<tr>
<td width="90%"></td>
<td><a href="#" id="logout"><strong>Logout</strong></a></td>
</tr>
</table>
CSS
CSS
@charset "utf-8";
/* CSS Document */
#logout {
color:#BBB;
}
a:hover {
color:#FFF;
}
Though the color of logout appears to be what is given in the css , the color doesn't change when i place my mouse over the link (to white). What is the reason ?
虽然注销的颜色似乎是 css 中给出的颜色，但当我将鼠标放在链接上（到白色）时，颜色不会改变。是什么原因 ？
I must tell there are other css files that tend to change the color of the link when the mouse is placed over them and they work fine.
我必须告诉还有其他 css 文件，当鼠标放在它们上面时，它们往往会改变链接的颜色，并且它们工作正常。
回答by Quentin
An id selector (#logout) is more specific then a type selector (a) plus a pseudo-class (:hover), so your first ruleset will always win the cascade.
id 选择器 ( #logout) 比类型选择器 ( a) 加上伪类 ( :hover)更具体，因此您的第一个规则集将始终赢得级联。
Use #logout:hoverinstead.
使用#logout:hover来代替。
回答by DOK
Simplifying:
简化：
You have two CSS rules that apply to this anchor.
您有两个适用于该锚点的 CSS 规则。
Both rules change the color.
这两个规则都会改变颜色。
Only one rule can apply; only one color can be chosen.
只能适用一项规则；只能选择一种颜色。
The browser has to choose between the rule based on an ID (#logout) and a rule based on the element type (<a>).
浏览器必须在基于 ID ( #logout) 的规则和基于元素类型 ( <a>)的规则之间进行选择。
The rule based on ID wins in this situation. It is more specific to specify an ID than to specify all elements of a type (anchor).
在这种情况下，基于 ID 的规则获胜。指定一个 ID 比指定一个类型（锚点）的所有元素更具体。
回答by Pedro Miranda
You have to follow a hierarchy sequence:
您必须遵循层次结构顺序：
Link, Hover, Visited
链接、悬停、访问
For example:
例如：
a:link
{
text-decoration:none;
color:#008b45;
}
a:hover
{
margin-bottom: 3px solid #ff7400;
background:white;
}
a:visited
{
color:#ee9a00;
}
