如何写：悬停条件为：之前和之后？

391

这要看情况。

如果您只是希望在a元素相匹配的伪类将样式应用到:before伪元素，你需要写a:hover:before或a:visited:before来代替。注意伪元素后伪类（并且实际上，在整个选择器的最后）。还要注意它们是两个不同的东西;把它们称为“伪选择器”会让你感到困惑，一旦遇到这样的语法问题。

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

伪类和伪元素的这种特定顺序在spec指出：

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

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

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

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

然而，如:hover用户动作伪类，如果你需要这个效果适用仅当用户与伪元素本身，而不是a元素进行交互，那么这是不是除了通过一些模糊的布局相关的解决方法之外可能。正如文中所暗示的那样，标准的CSS伪元素当前不能具有伪类。在这种情况下，您需要将:hover应用于实际的子元素而不是伪元素。

_{当然，这并不适用于伪类链接如:visited如在问题，因为伪元素都没有联系。}

来源

2011-04-25 10:10:47 BoltClock

+22

应当指出的是，它将在悬停父元素 - 这会导致应用装修即使::后pseudoelement不是鼠标下，只要它的父母是。 – SamGoody 2012-06-26 09:23:34

+5

还应该注意的是，由于指定了布局规则的方式，有很多事情*不会*对此做出响应 - 例如， '文本decoration'。 – 2013-04-21 00:16:34

+1

@Chris Krycho：的确 - 我实际上碰巧对这个与伪元素有关的特定问题有解释[这里]（http://stackoverflow.com/questions/11474780/hoverbefore-text-decoration-none-has-无效果/ 11481121＃11481121）。当然，值得澄清的是，问题本身与伪类/伪元素*选择器*没有关系，但正如您指出的那样，布局问题。 – BoltClock 2013-04-21 03:00:28

69

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

来源

2011-04-25 10:11:59 sandeep

+4

正确的语法将是：hover :: – mikkelbreum 2013-06-05 20:42:48

+2

@mikkelbreum你有参考证明吗？ – shea 2014-03-02 02:36:38

+3

@bungeshea：这是CSS3语法。请参阅我的回答下的评论（以及我最近的编辑）。将它称为“正确的语法”有点不准确，因为CSS1/2伪元素允许单冒号和双冒号。我将其称为* recommended *语法，因为今天继续使用传统语法的唯一原因是支持IE8及更早版本。 – BoltClock 2015-01-13 18:07:02

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

来源

2013-04-24 09:17:31 Rao

+1

这是一个可爱的答案。事实上，它激发了我[略微扩展你的小提琴]（http://jsfiddle.net/YSgKL/784/），将span文本的字体大小提高到24px以匹配替换文本，并添加了3个非在替换文本之前和之后分隔空间，以便它们占据相同的宽度，并使用'text-decoration：underline'设置'a：hover :: before'，这将导致下划线拾取替换文本的红色。 – 2016-08-11 02:43:47

-1

您还可以与一类使用限制你的行动右尖括号（“>”），正如我在此代码中所做的：

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

来源

2015-07-30 17:16:47

0

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

来源

2017-04-24 18:09:17 bbrinx

2

尝试使用::使用.card-listing:hover::afterhover和after它西港岛线工作

来源

2017-08-09 12:48:18

如何写：悬停条件为：之前和之后？

回答

相关问题