a：悬停不起作用

Question

HTML

 <table width="100%">
<tr>
    <td width="90%"></td>
    <td><a href="#" id="logout"><strong>Logout</strong></a></td>
 </tr>
</table>

CSS

@charset "utf-8";
/* CSS Document */

#logout {
color:#BBB;
}

a:hover {
color:#FFF;
}

虽然注销的颜色似乎是 css 中给出的颜色，但当我将鼠标放在链接上时，颜色不会改变（变为白色）。原因是什么？

我必须告诉你，还有其他 css 文件，当鼠标放在它们上方时，它们往往会改变链接的颜色，并且它们工作正常。

Answer 1

id 选择器 (

#logout

) 比类型选择器 (

a

) 加上伪类 (

:hover

) 更具体，因此您的第一个规则集将始终赢得级联。

请使用

#logout:hover

来代替。

Answer 2

简化：

您有两个适用于该锚点的 CSS 规则。

两条规则都会改变颜色。

只能适用一条规则；只能选择一种颜色。

浏览器必须在基于 ID 的规则 (

#logout

) 和基于元素类型的规则 (

<a>

) 之间进行选择。

在这种情况下，基于 ID 的规则获胜。指定 ID 比指定类型（锚点）的所有元素更具体。

Answer 3

开始吧！只需复制和面食

#logout{
color:#bbb;
}

#logout :hover{
color: #fff;
}

 <table width="100%">
<tr>
    <td width="90%"></td>
    <td><a href="#" id="logout"><strong>Logout</strong></a></td>
 </tr>
</table>

Answer 4

您应该始终使用

Id Selector (#)

而不是类和其他选择器。这将帮助您有效地使用

Hover effect

!!

Answer 5

您必须遵循层次结构顺序：

链接、悬停、访问过

例如：

a:link
{
  text-decoration:none;
  color:#008b45;
}

a:hover
{
  margin-bottom: 3px solid #ff7400;
  background: white;
}

a:visited
{
  color:#ee9a00;
}

Answer 6

你必须先将其设为块或内联块。 像这样：

#logout {
    display: inline-block
    color:#BBB;
}

a:hover {
    color:#FFF;
}