如何在 CSS 中使用“悬停”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/905033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use 'hover' in CSS
提问by omg
I used the code below in order to fulfill this target:
我使用下面的代码来实现这个目标：
When mouse hover on the anchor, the underline comes out,
当鼠标悬停在锚点上时，下划线出现，
but it failed to work,
但它失败了，
<a class="hover">click</a>
a .hover :hover{
text-decoration:underline;
}
What's the right version to do this?
执行此操作的正确版本是什么？
回答by David says reinstate Monica
If you want the underline to be present while the mouse hovers over the link, then:
如果您希望在鼠标悬停在链接上时出现下划线，则：
a:hover {text-decoration: underline; }
is sufficient, however you can also use a class-name of 'hover' if you wish, and the following would be equally applicable:
就足够了，但是如果您愿意，您也可以使用“悬停”的类名，并且以下内容同样适用：
a.hover:hover {text-decoration: underline; }
Incidentally it may be worth pointing out that the class name of 'hover' doesn't really add anything to the element, as the psuedo-element of a:hoverdoes the same thing as that of a.hover:hover. Unless it's just a demonstration of using a class-name.
顺便提一下，可能值得指出的是，'hover' 的类名并没有真正向元素添加任何内容，因为 的伪元素a:hover与a.hover:hover. 除非它只是使用类名的演示。
回答by SirCommy
There are many ways of doing that. If you really want to have a 'hover' class in your A element, then you'd have to do:
有很多方法可以做到这一点。如果你真的想在你的 A 元素中有一个“悬停”类，那么你必须这样做：
a.hover:hover { code here }
Then again, it's uncommon to have such a className there, this is how you do a regular hover:
再说一次，在那里有这样的 className 并不常见，这就是您进行常规悬停的方式：
select:hover { code here }
Here are a few more examples:
以下是更多示例：
1
1
HTML:
HTML：
<a class="button" href="#" title="">Click me</a>
CSS:
CSS：
.button:hover { code here }
2
2
HTML:
HTML：
<h1>Welcome</h1>
CSS:
CSS：
h1:hover { code here }
:hover is one of the many pseudo-classes.
:hover 是众多伪类之一。
For example you can change, you can control the styling of an element when the mouse hovers over it, when it is clicked and when it was previously clicked.
例如，您可以更改、控制鼠标悬停在元素上时、单击时以及先前单击时元素的样式。
HTML:
HTML：
<a class="home" href="#" title="Go back">Go home!</a>
CSS:
CSS：
.home { color: red; }
.home:hover { color: green; }
.home:active { color: blue; }
.home:visited { color: black; }
Aside the awkward colors I've given as examples, the link with the 'home' class will be red by default, green when the mouse hovers them, blue when they are clicked and black after they were clicked.
除了我作为例子给出的尴尬颜色之外，“home”类的链接默认为红色，鼠标悬停时为绿色，点击时为蓝色，点击后为黑色。
Hope this helps
希望这可以帮助
回答by valentinas
Not an answer, but explanation of why your css is not matching HTML.
不是答案，而是解释为什么您的 css 与 HTML 不匹配。
In css space is used as a separator to tell browser to look in children, so your css
在 css 空间中用作分隔符来告诉浏览器在子项中查找，因此您的 css
a .hover :hover{
text-decoration:underline;
}
means "look for a element, then look for any descendants of it that have hover class and look of any descendants of those descendants that have hover state" and would match this markup
意思是“寻找一个元素，然后寻找它的任何具有悬停类的后代，并寻找那些具有悬停状态的后代的任何后代”并且会匹配这个标记
<a>
<span class="hover">
<span>
I will become underlined when you hover on me
<span/>
</span>
</a>
If you want to match <a class="hover">I will become underlined when you hover on me</a>you should use a.hover:hover, which means "look for any a element with class hover and with hover state"
如果你想匹配 <a class="hover">I will become underlined when you hover on me</a>你应该使用a.hover:hover，这意味着“寻找任何具有悬停类和悬停状态的元素”
回答by Ballsacian1
a.hover:hover
a.悬停：悬停
回答by chaos
a.hover:hover {
text-decoration:underline;
}
回答by alex
You need to concatenate the selector and pseudo selector. You'll also need a style element to contain your styles. Most people use an external stylesheet, for lots of benefits (caching for one).
您需要连接选择器和伪选择器。您还需要一个样式元素来包含您的样式。大多数人使用外部样式表，以获得很多好处（缓存一个）。
<a class="hover">click</a>
<style type="text/css">
a.hover:hover {
text-decoration: underline;
}
</style>
Just a note: the hover class is not necessary, unless you are defining only certain links to have this behavior (which may be the case)
请注意：悬停类不是必需的，除非您仅定义某些链接以具有此行为（可能是这种情况）
回答by PatrikAkerstrand
The href is a required attribute of an anchor element, so without it, you cannot expect all browsers to handle it equally. Anyway, I read somewhere in a comment that you only want the link to be underlined when hovering, and not otherwise. You can use the following to achieve this, and it will only apply to links with the hover-class:
href 是锚元素的必需属性，因此没有它，您就不能期望所有浏览器都能平等地处理它。无论如何，我在评论中的某处读到您只希望在悬停时为链接加下划线，而不是其他情况。您可以使用以下方法来实现这一点，它仅适用于带有hover类的链接：
<a class="hover" href="">click</a>
a.hover {
text-decoration: none;
}
a.hover:hover {
text-decoration:underline;
}
回答by Alan Haggai Alavi
You should have used:
你应该使用过：
a:hover {
text-decoration: underline;
}
hoveris a pseudo class in CSS. No need to assign a class.
hover是 CSS 中的伪类。无需分配类。
回答by JPawelHeaven
I was working on a nice defect last time and was wondering more about how to use properly hover property for A tag link and for IE browser. A strange thing for me was that IE was not able to capture A tag link element based on a simple A selector. So, I found out how to even force capturing A tag element and I spotted that we must use more specifc CSS selector. Here is an example below - It works perfect:
上次我正在研究一个很好的缺陷，并且想知道更多关于如何为 A 标记链接和 IE 浏览器正确使用悬停属性。对我来说奇怪的是，IE 无法基于简单的 A 选择器捕获 A 标记链接元素。所以，我发现了如何强制捕获 A 标签元素，我发现我们必须使用更具体的 CSS 选择器。下面是一个示例 - 它完美无缺：
li a[href]:hover {...}
