如何在 CSS 中使用“悬停”

Posted 2023-03-06

【中文标题】如何在 CSS 中使用“悬停”

【英文标题】：How to use 'hover' in CSS

【发布时间】：2010-10-28 15:34:36

【问题描述】：

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

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

但它失败了，

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

    a .hover :hover
        text-decoration:underline;
    

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

【参考方案1】：

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

a:hover text-decoration: underline; 

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

a.hover:hover text-decoration: underline; 

顺便提一下，'hover' 的类名并没有真正为元素添加任何内容，因为a:hover 的伪元素与a.hover:hover 的伪元素做同样的事情。除非它只是一个使用类名的演示。

【讨论】：

谢谢 ricebowl，但是有没有什么方法可以让它对没有 href 属性的锚起作用？

在 IE 中我的意思是，它在 firefox 中有效，但在 IE 中对于没有 href 属性的锚点无效。

恐怕不行，IE（肯定是IE6，也许是IE7——我不记得了）限制了它对:hover的使用，所以只有标签可以使用它。 IE8 可能对此有所改进，但我不完全确定。

IE7+ 支持任意元素上的 :hover 伪类。

【参考方案2】：

有很多方法可以做到这一点。 如果你真的想在你的 A 元素中有一个“悬停”类，那么你必须这样做：

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”类的链接默认为红色，鼠标悬停时为绿色，单击时为蓝色，单击后为黑色。

希望对你有帮助

【参考方案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，意思是“寻找任何具有类悬停和悬停状态的元素”

【参考方案4】：

a.hover:悬停

【参考方案5】：

a.hover:hover 
    text-decoration:underline;

【参考方案6】：

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

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

<style type="text/css">

    a.hover:hover 
        text-decoration: underline;

    

</style>

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

【讨论】：

但它在 IE8 中不起作用，也许我使用了一个带有“-”的类名？说 a.hover-link:hover ?

连字符 (-) 在 CSS 中的类名中很好。要使上面的选择器起作用，您的元素必须看起来像 click 然后将鼠标悬停在该链接上。

谢谢 alex，但是有没有什么方法可以使它适用于没有 href 属性的锚点？

它应该适用于没有 href 属性的锚点。我可以问你为什么省略它吗？

因为如果加了href，即使光标不在，下划线也会出来，我还不知道原因..

【参考方案7】：

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

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

a.hover 
    text-decoration: none;


a.hover:hover 
    text-decoration:underline;

【参考方案8】：

你应该使用过：

a:hover 
    text-decoration: underline;

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

【讨论】：

可能他只希望 将他的悬停类放在上面以具有此行为。

是的，我错过了。谢谢，混乱。

【参考方案9】：

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

li a[href]:hover ...