我怎么能写一个':hover'条件'a:before'和& # 39;后# 39;?

小开

最佳答案

这取决于你实际要做什么。

如果你只是想在a元素匹配伪类时对:before伪元素应用样式，你需要写a:hover:before或a:visited:before。注意伪元素来自后伪类(实际上，在整个选择器的最后)。还要注意它们是两种不同的东西;把它们都称为“伪选择器”;一旦你遇到像这样的语法问题，它会让你感到困惑。

如果您正在编写CSS3，您可以用双冒号表示伪元素，以使这种区别更清楚。因此，a:hover::before和a:visited::before。但如果您是为IE8或更老版本的浏览器开发，那么您可以使用单冒号。

伪类和伪元素的特定顺序在规范中声明:

一个伪元素可以被添加到一个选择器的最后一个简单选择器序列中。

简单选择器的序列是一个简单的选择器链，没有被组合子分开。它总是以类型选择器或通用选择器开始。序列中不允许有其他类型选择器或通用选择器。

简单的选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID选择器或伪类。

伪类是一个简单的选择器。而伪元素则不是，尽管它类似于一个简单的选择器。

然而，对于像:hover¹这样的用户操作伪类，如果你需要在用户与伪元素本身交互而不是与a元素交互时应用只有效果，那么这是不可能的，除非通过一些模糊的依赖布局的变通方法。正如文中所暗示的，标准CSS伪元素目前不能有伪类。在这种情况下，你需要将:hover应用于一个实际的子元素，而不是一个伪元素。

¹ _{当然，这并不适用于链接伪类，如问题中的:visited，因为伪元素不是链接。}

小开

写a:hover::before而不是a::before:hover: 例子。

小开

要更改鼠标悬停时的菜单链接文本(悬停时的不同语言文本)，下面是

jsfiddle example

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: "ಕನ್ನಡ";
}

小开

你也可以使用右尖括号(">")限制你的动作到一个类，就像我在这段代码中所做的那样:

<!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类上工作

小开

BoltClock的回答是正确的。我唯一想追加的是，如果你只想选择伪元素，就输入一个span。

例如:

<li><span data-icon='u'></span> List Element </li>

而不是:

<li> data-icon='u' List Element</li>

这样你就可以简单地说

ul [data-icon]:hover::before {color: #f7f7f7;}

这将只突出显示伪元素，而不是整个li元素。

小开

尝试使用.card-listing:hover::after， hover和after使用::。它会起作用的。

小开

或者你可以将pointer-events:none设置为你的a元素，将pointer-event:all设置为你的a:before元素，然后将悬停CSS添加到一个元素中:

a{
pointer-events: none;
}
a:before{
pointer-events: all
}
a:hover:before{
background: blue;
}