30

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

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

但它没有工作，

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

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

执行此操作的正确版本是什么？

4

9 回答 9

35

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

a:hover {text-decoration: underline; }

就足够了，但是如果您愿意，您也可以使用类名“悬停”，以下内容同样适用：

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

顺便说一句，可能值得指出的是，“hover”的类名并没有真正向元素添加任何内容，因为 的 psuedo-element 与 的a:hover做同样的事情a.hover:hover。除非它只是使用类名的演示。

于 2009-05-25T01:28:05.857 回答
7

有很多方法可以做到这一点。如果你真的想在你的 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”类的链接默认为红色，鼠标悬停时为绿色，单击时为蓝色，单击后为黑色。

希望这可以帮助

于 2012-09-29T17:58:37.150 回答
6

不是答案，而是解释为什么您的 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，这意味着“寻找任何具有类悬停和悬停状态的元素”

于 2013-01-28T03:39:49.197 回答
4 
a.hover:hover {
    text-decoration:underline;
}
于 2009-05-25T01:28:11.223 回答
4

a.hover:悬停

于 2009-05-25T01:27:40.990 回答
2

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

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

<style type="text/css">

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

    }

</style>

请注意：悬停类不是必需的，除非您仅定义某些链接以具有此行为（可能是这种情况）

于 2009-05-25T01:28:18.493 回答
1

href 是锚元素的必需属性，因此没有它，您不能期望所有浏览器都能平等地处理它。无论如何，我在评论中的某处读到，您只希望在悬停时给链接加下划线，而不是在其他地方加下划线。您可以使用以下方法来实现此目的，它仅适用于具有悬停类的链接：

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

a.hover {
    text-decoration: none;
}

a.hover:hover {
    text-decoration:underline;
}
于 2009-07-03T14:06:34.113 回答
0

你应该使用过：

a:hover {
    text-decoration: underline;
}

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

于 2009-05-25T01:28:33.097 回答
0

上次我正在处理一个很好的缺陷，并且想知道更多关于如何正确使用 A 标签链接和 IE 浏览器的悬停属性。对我来说奇怪的是，IE 无法基于简单的 A 选择器捕获 A 标签链接元素。因此，我发现了如何强制捕获 A 标签元素，并且发现我们必须使用更具体的 CSS 选择器。下面是一个示例 - 它非常完美：

li a[href]:hover {...}
于 2013-12-02T11:06:26.527 回答