如何使用CSS使HTML链接在鼠标悬停时变色并去掉下划线？

Question

如何通过CSS使HTML中的链接在鼠标悬停时变色且去除下划线？

- Diddytheboss

---

@Strager：那不是一个更好的编辑。 - GEOCHET

@Rich B，啊，看来你在我编辑的时候也在编辑这篇帖子，所以我的编辑覆盖了你的。抱歉。 - strager

@strager：不可能，因为你正在编辑我的修订版本，而不是原始帖子。但无论如何。 - GEOCHET

@Rich B，我不相信那是真的。但无论怎样。;P - strager

@Rich B，我基于修订版1点击了编辑。然后，你点击了编辑并发布了你的编辑。接着，我发布了我的编辑。因此，似乎SO合并了我们的编辑；我没有看到你的（也没有注意到它）。 - strager

@Diddytheboss：你绝对不应该回滚到你的修订版本。 - GEOCHET

Answer 1

你需要查看:hover伪类选择器，color属性和text-decoration属性。

a:hover { color: red; text-decoration: none; }

为确保超链接按照您的意愿进行样式设置（并避免与其他样式规则发生冲突），请使用 !important：

a:hover { color: red !important; text-decoration: none !important; }

- strager

---

请注意，IE6（可能是7，不确定）会忽略!important。 - Pim Jager

使用important是个不好的选择。你需要有适当的具体性，没有更多。 - user1721135

Answer 2

除了stragers的回答之外，还要确保以LoVe HAte的方式声明伪类。您必须先声明：link，然后是：visited，然后是：hover，最后是：active。否则，某些浏览器可能不会应用伪类。

a:link{
 /*这只适用于有名称的锚点*/
}
a:visited{
 /*已访问链接的可能样式*/
}
a:hover{
 /*当鼠标悬停在a标签上时*/
 text-decoration:none;
 color:red;
}
a:active{
 /*当单击a标签时的可能样式*/
}

- Pim Jager