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

时间 2020-03-16

标签如何编写 hover 条件繁體版

原文原文链接

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

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

#1楼

在鼠标悬停时更改菜单连接的文本。（悬停时的不一样语言文字）这是浏览器

jsfiddle示例布局

的HTML： spa

<a align="center" href="#"><span>kannada</span></a>

CSS： code

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}

#2楼

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

<!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的答案是正确的。我要附加的惟一内容是，若是只想选择伪元素，则将其放在一个跨度中。 get

例如： it

<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在问题中，由于伪元素不是连接。}