Question

如何为:hover撰写:visited和a:before条件？

我正在尝试a:before:hover，但它无效

Answer 1

这取决于你实际上要做的事情。

如果您只想在:before元素与伪类匹配时将样式应用于a伪元素，则需要编写a:hover:before或a:visited:before代替。请注意，伪元素在伪类之后（实际上，在整个选择器的最后）。另请注意，它们是两个不同的东西;一旦遇到诸如此类的语法问题，将它们称为“伪选择器”会让您感到困惑。

如果您正在编写CSS3，则可以表示具有双冒号的伪元素，以使此区别更清晰。因此，a:hover::before和a:visited::before。但是，如果您正在为IE8及更早版本等旧版浏览器进行开发，那么您可以轻松使用单个冒号。

伪类和伪元素的特定顺序在spec：
中说明

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

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

简单选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

伪类是一个简单的选择器。然而，伪元素不是，即使它类似于简单的选择器。

但是，对于用户操作伪类，例如:hover ¹，如果您需要此效果，则在用户与伪进行交互时仅应用 -element本身但不是a元素，除了通过一些模糊的依赖于布局的解决方法之外，这是不可能的。正如文本所暗示的那样，标准CSS伪元素当前不能具有伪类。在这种情况下，您需要将:hover应用于实际的子元素而不是伪元素。

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

Answer 2

撰写a:hover::before代替a::before:hover：example。

Answer 3

在鼠标悬停时更改菜单链接的文本。（悬停时不同的语言文字）

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

Answer 4

尝试使用.card-listing:hover::after hover和after使用::工作

Answer 5

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元素

Answer 6

或者您可以将pointer-events:none设置为a元素并将pointer-event:all设置为a:before元素，然后将悬浮CSS添加到元素

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

Answer 7

您也可以使用右尖括号（“＆gt;”）将您的操作限制为一个类，就像我在此代码中所做的那样：

<!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>

注意：悬停：在开关之前仅适用于.test1类

怎么写：悬停条件为a：before和a：after？

7 个答案: