如何在CSS中使用“hover”

Question

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

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

但它没有生效，

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

    a .hover :hover{
        text-decoration:underline;
    }

哪个版本是正确的？

- omg

Answer 1

如果您希望在鼠标悬停在链接上时仍显示下划线，则：

a:hover {text-decoration: underline; }

使用一个类名为“hover”的选择器是同样适用的，但只设置:hover伪类也已足够：

a.hover:hover {text-decoration: underline; }

顺带一提，'hover'的类名对元素其实没有什么添加作用，因为伪元素a:hover与a.hover:hover的行为是相同的。除非这只是为了演示使用类名。

- David Thomas

---

谢谢你的回复，ricebowl。但是有没有办法让它适用于没有href属性的锚点？ - omg

在IE中，我的意思是，对于没有href属性的锚点，在Firefox中可以工作，但在IE中无法工作。 - omg

很抱歉，IE浏览器（特别是IE6，也许包括IE7，我记不清了）在使用:hover时有限制，只有<a>标签能够使用。IE8可能已经改进了这一点，但我不能完全确定。 - David Thomas

IE7+支持在任意元素上使用:hover伪类。 - ajm

Answer 2

有许多方式可以实现这个目标。 如果您真的想要在A元素中有一个“hover”类，那么您需要这样做：

a.hover:hover { code here }

再说一遍，那个类名在那里很少见，这是如何进行普通的悬停操作：

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”类链接将默认为红色，当鼠标悬停在它们上面时为绿色，在单击后为蓝色，并在单击后变为黑色。

希望这可以帮助你

- SirCommy

Answer 3

这不是答案，而是解释为什么您的CSS不能匹配HTML。

在CSS中，空格被用作分隔符，告诉浏览器查找嵌套元素。因此，您的CSS：

a .hover :hover{
   text-decoration:underline;
}

意思是“查找一个元素，然后查找具有hover类的任何子孙元素，并查找这些子孙元素的任何后代中具有hover状态的元素”，并且会匹配这个标记。

<a>
   <span class="hover">
      <span>
         I will become underlined when you hover on me
      <span/>
   </span>
</a> 

如果您想匹配 <a class="hover">当您将鼠标悬停在我上面时，我会变成下划线</a>，您应该使用a.hover:hover，这意味着“查找任何带有类别为 hover 和悬停状态的 a 元素”。

- valentinas

Answer 4

a.hover:hover {
    text-decoration:underline;
}

- chaos

Answer 5

a.hover:hover

- Ballsacian1

Answer 6

您需要将选择器和伪类选择器连接起来。您还需要一个样式元素来包含您的样式。大多数人使用外部样式表，有很多好处（例如缓存）。

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

<style type="text/css">

    a.hover:hover {
        text-decoration: underline;

    }

</style>

只是一个提示：hover类不是必需的，除非您要定义仅具有此行为的某些链接（这可能是情况）。

- alex

---

但在IE8中它无法工作，也许我使用了一个带有“-”的类名？比如a.hover-link:hover？ - omg

CSS中类名可以使用连字符（-）。为了让您上面的选择器起作用，您的元素必须看起来像<a href="" class="hover-link">click</a>，然后将鼠标悬停在链接上。 - alex

它应该适用于没有href属性的锚点。我可以问一下为什么您省略了它吗？ - alex

因为如果添加href，即使光标不在上面，下划线也会出现，我还不知道原因。 - omg

没关系，你很坦率，我确实是个 CSS 新手 -,- - omg

Answer 7

href 是锚点元素的必需属性，没有它，你不能期望所有浏览器都能同等处理。无论如何，我在某个评论中读到过，你只想在悬停时下划线链接，而不是其他情况。你可以使用以下代码来实现这一点，它仅适用于带有 hover 类的链接：

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

a.hover {
    text-decoration: none;
}

a.hover:hover {
    text-decoration:underline;
}

- PatrikAkerstrand

Answer 8

你应该使用：

a:hover {
    text-decoration: underline;
}

hover 是 CSS 中的伪类，无需分配类。

- Alan Haggai Alavi

---

可能他只想让他放置悬停类的<a>具有这种行为。 - chaos

是的，我错过了那个。谢谢你，chaos。 - Alan Haggai Alavi

Answer 9

我上次正在处理一个很好的缺陷，并且对如何正确使用A标签链接的hover属性以及在IE浏览器中使用它更加感兴趣。 让我感到奇怪的是，IE无法基于简单的A选择器捕获A标签链接元素。 所以，我找到了一种方法来强制捕获A标签元素，我发现我们必须使用更具体的CSS选择器。下面是一个完美运作的示例：

li a[href]:hover {...}

- JPawelHeaven