如何在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 }

2

HTML：

<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空间中，空格用作分隔符，以告知浏览器查找子项，因此您的CSS

a .hover :hover{

   text-decoration:underline;

}

意思是“寻找一个元素，然后寻找它具有悬停类的任何后代，并寻找那些具有悬停状态的后代的任何后代”，并且将与该标记匹配

<a>

   <span class="hover">

      <span>

         I will become underlined when you hover on me

      <span/>

   </span>

</a> 

如果要匹配< a class="hover">I will become underlined when you hover on me</a>，则应使用a.hover:hover，这意味着“查找具有类悬停和悬停状态的任何元素”