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 回答