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

346

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

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

— Jitendra Vyas
source

488

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

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

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

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

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

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

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

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

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

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

— BoltClock
source

27

应当指出，这会将鼠标悬停在父元素上-即使:: after伪元素不在鼠标下方，只要它的父元素在上面，这都会导致应用装饰。

— SamGoody 2012年

6

还应该注意的是，由于指定布局规则的方式，很多事情都没有对此做出响应-例如text-decoration。

— 克里斯·克里乔

1

@Chris Krycho：的确如此-我实际上在这里就伪元素对这个特定问题做了一个解释。当然，值得说明的是，问题本身与伪类/伪元素选择器无关，但是正如您所指出的，这是布局问题。

— BoltClock

@BoltClock我upvoted这个问题的答案很后不久，我离开了这条评论。哈萨

— 克里斯·克里乔

2

单冒号（:)指定伪类，双冒号（：:)指定伪元素。因此应该是：: hover :: before

— mikkelbreum

107

写a:hover::before而不是a::before:hover：example。

— 桑迪普
source

2

@mikkelbreum您是否可以证明这一点？

— 2014年

3

@bungeshea：这是CSS3语法。查看我的答案（以及我最近的编辑）下的评论。尽管将其称为“ the”正确语法有点不准确，因为CSS1 / 2伪元素同时允许使用单冒号和双冒号。我将其称为推荐语法，因为今天继续使用旧语法的唯一原因是支持IE8和更早版本。

— BoltClock

@mikkelbreum @sheabunge有关CSS2 :after和CSS3的更多信息::after developer.mozilla.org/en-US/docs/Web/CSS/（单个:具有更好的支持）

— travis

它不适用于下划线:( jsfiddle.net/porzechowski/u5dhthvq 也请添加显示内容：inline-block; jsfiddle.net/porzechowski/u89fo4oq

— plusz

7

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

jsfiddle示例

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

— 饶
source

1

这是一个很好的答案。实际上，它启发了我，通过将范围文本的字体大小增加到24px以匹配替换文本来稍微扩展您的提琴，在替换文本前后添加3个不间断空格，以使它们占据相同的宽度，并且样式a:hover::before为text-decoration: underline，使下划线呈现为替换文本的红色。

— 戴夫·兰德

4

尝试使用.card-listing:hover::after hover并after使用::它会起作用

— Subindas pm
source

1

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

— bbrinx
source

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

— 斯蒂芬·格鲁恩瓦尔德（Stefan Gruenwald）
source