我该如何写:hover和:visited条件a:before？
我正在尝试a:before:hover，但它不起作用。
问问题
523418 次
7 回答
551
This depends on what you're actually trying to do.
If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.
If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.
This specific order of pseudo-classes and pseudo-elements is stated in the spec:
One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.
However, for user-action pseudo-classes such as :hover1, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.
1 Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.
于 2011-04-25T10:10:47.190 回答
133
Write a:hover::before instead of a::before:hover: example.
于 2011-04-25T10:11:59.257 回答
9
要在鼠标悬停时更改菜单链接的文本（悬停时使用不同的语言文本），这里是
HTML：
<a align="center" href="#"><span>kannada</span></a>
CSS：
span {
font-size: 12px;
}
a {
color: green;
}
a:hover span {
display: none;
}
a:hover:before {
color: red;
font-size: 24px;
content: "ಕನ್ನಡ";
}
于 2013-04-24T09:17:31.887 回答
7
尝试使用.card-listing:hover::after,hover和afterusing ::。它会起作用的。
于 2017-08-09T12:48:18.793 回答
5
或者您可以设置pointer-events:none到您的a元素和pointer-event:all您的a:before元素，然后将悬停 CSS 添加到元素：
a{
pointer-events: none;
}
a:before{
pointer-events: all
}
a:hover:before{
background: blue;
}
于 2020-07-14T14:12:49.013 回答
2
BoltClock 的回答是正确的。我唯一要附加的是，如果您只想选择伪元素，请放入一个跨度。
例如：
<li><span data-icon='u'></span> List Element </li>
代替：
<li> data-icon='u' List Element</li>
这样你就可以简单地说
ul [data-icon]:hover::before {color: #f7f7f7;}
这只会突出显示伪元素，而不是整个 li 元素。
于 2017-04-24T18:09:17.690 回答
-1
您还可以使用右尖括号 (">") 将您的操作限制在一个类中，就像我在这段代码中所做的那样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size: 12px;
}
a {
color: green;
}
.test1>a:hover span {
display: none;
}
.test1>a:hover:before {
color: red;
content: "Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>
注意： hover:before 开关仅适用于 .test1 类
于 2015-07-30T17:16:47.007 回答