如何为a：before和a：after编写：hover条件？

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

我正在尝试a:before:hover但是没有用

#1楼

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

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

#2楼

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

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

#3楼

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

#4楼

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

#5楼

这取决于您实际要执行的操作。

如果您只是希望在a元素与伪类匹配时将样式应用于:before伪元素，则需要编写a:hover:before或a:visited:before 。通知伪元件而来的伪类之后（实际上，在整个选择器的最末端）。还要注意，它们是两件事。一旦遇到诸如此类的语法问题，将它们都称为“伪选择器”将使您感到困惑。

如果您正在编写CSS3，则可以用双冒号表示一个伪元素，以使这种区别更加清楚。因此， a:hover::before和a:visited::before 。但是，如果您正在为IE8和更旧的版本等旧版浏览器进行开发，则可以使用单一冒号就可以了。

伪类和伪元素的这个特定的顺序在陈述规格：

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

简单选择器序列是不由组合器分隔的一系列简单选择器。它总是以类型选择器或通用选择器开头。序列中不允许使用其他类型选择器或通用选择器。

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

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

但是，对于诸如:hover ^1之类的用户操作伪类，如果您只需要在用户与伪元素本身（而不是与a元素）交互时才需要应用此效果，则除了通过一些晦涩的布局之外，这是不可能的依赖的解决方法。正如文本所暗示的，标准CSS伪元素当前不能具有伪类。在这种情况下，您需要将:hover应用于实际的子元素，而不是伪元素。

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

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3189994

标签

WIL