如何在CSS中使用“悬停”

Question

我使用下面的代码来实现此目标：

当鼠标悬停在锚点上时，会出现下划线，

却没用

    <a class="hover">click</a>

    a .hover :hover{

        text-decoration:underline;

    }

什么是正确的版本？

Answer 1

如果希望在鼠标悬停在链接上时出现下划线，则：a:hover {text-decoration: underline; }足够了，但是您也可以根据需要使用“ hover”的类名，以下内容同样适用：a.hover:hover {text-decoration: underline; }顺便提一下，可能值得指出的是，'hover'的类名并没有真正为元素添加任何内容，因为的psuedo元素与的a:hover功能相同a.hover:hover。除非只是使用类名的演示。

Answer 2

有很多方法可以做到这一点。如果您确实希望在A元素中具有“悬停”类，则必须执行以下操作：a.hover:hover { code here }再说一遍，在那里有这样的className并不常见，这是您进行常规悬停的方式：select:hover { code here }以下是一些示例：1个HTML：<a class="button" href="#" title="">Click me</a>CSS：.button:hover { code here }2HTML：<h1>Welcome</h1>CSS：h1:hover { code here }：hover是许多伪类之一。例如，您可以进行更改，可以在鼠标悬停在元素上，单击时以及之前单击时控制元素的样式。HTML：<a class="home" href="#" title="Go back">Go home!</a>CSS：.home { color: red; }.home:hover { color: green; }.home:active { color: blue; }.home:visited { color: black; }除了我作为示例给出的笨拙的颜色外，“ home”类的链接默认情况下为红色，鼠标悬停它们时为绿色，单击它们时为蓝色，而单击后为黑色。希望这可以帮助

Answer 3

不是答案，而是解释为什么CSS不匹配HTML。在CSS空间中，空格用作分隔符，以告知浏览器查找子项，因此您的CSSa .hover :hover{&nbsp; &nbsp;text-decoration:underline;}意思是“寻找一个元素，然后寻找它具有悬停类的任何后代，并寻找那些具有悬停状态的后代的任何后代”，并且将与该标记匹配<a>&nbsp; &nbsp;<span class="hover">&nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;I will become underlined when you hover on me&nbsp; &nbsp; &nbsp; <span/>&nbsp; &nbsp;</span></a>&nbsp;如果要匹配< a class="hover">I will become underlined when you hover on me</a>，则应使用a.hover:hover，这意味着“查找具有类悬停和悬停状态的任何元素”