a:hover 不起作用

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文件，它们倾向于在鼠标悬停在链接上时更改链接的颜色，并且它们可以正常工作。

- saplingPro

---

布局表格？注销链接？哦，亲爱的。 - Quentin

@Quentin：在我看来，注销链接没有任何问题。有时候，使用表格而不是“纯粹”的无表格CSS布局实际上可以避免无尽的烦恼。这是我的经验。 - Stefan

Answer 1

id选择器（#logout）比类型选择器（a）加伪类（:hover）更具体，因此您的第一条规则集将始终获胜。

请使用#logout:hover。

- Quentin

---

我虽然解决了问题，但是我还没有理解你的回答。你能否请清楚地解释一下？ - saplingPro

Answer 2

简化：

您有两个应用于此锚点的CSS规则。

这两个规则都改变了颜色。

只能应用一个规则；只能选择一种颜色。

浏览器必须在基于ID（#logout）的规则和基于元素类型（<a>）的规则之间进行选择。

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

- DOK

Answer 3

在编程中，你应该总是使用 Id选择器 (#) 而不是类和其他选择器。这将帮助你更有效地使用 悬停效果！

- Huxly Gerard Singh A

Answer 4

给你! 只需复制和粘贴

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

- Adarsh

Answer 5

你必须按照层级顺序进行:

链接，悬停，已访问

例如:

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

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

a:visited
{
  color:#ee9a00;
}

- Pedro Henrique Arthur