如何在CSS中使用'hover'

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-element与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 }

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,这意味着"寻找具有类悬停和悬停状态的任何元素"

Answer 4

a.悬停：悬停