我怎么能写:悬停和:访问条件的a:之前?
我正在尝试a:before:hover,但它不起作用。
我怎么能写:悬停和:访问条件的a:之前?
我正在尝试a:before:hover,但它不起作用。
当前回答
写a:hover::before而不是a::before:hover: example。
其他回答
尝试使用.card-listing:hover::after, hover, and after使用::。它会起作用的。
这取决于你实际要做什么。
如果你只是想在a元素与伪类匹配时应用样式到a: before伪元素,你需要写a:hover:before或a:visited:before。注意,伪元素出现在伪类之后(实际上,在整个选择器的末尾)。还要注意它们是两种不同的东西;一旦遇到这样的语法问题,将它们都称为“伪选择器”将使您感到困惑。
如果您正在编写CSS3,您可以用双冒号表示伪元素,以使这种区别更清楚。因此,a:hover::before和a:visited::before。但如果您是为IE8或更老版本的浏览器开发,那么您可以使用单冒号。
伪类和伪元素的特定顺序在规范中说明:
一个伪元素可以被添加到一个选择器的最后一个简单选择器序列中。 简单选择器序列是一个简单选择器链,不被组合子分开。它总是以类型选择器或通用选择器开始。序列中不允许有其他类型选择器或通用选择器。 简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID选择器或伪类。
伪类是一个简单的选择器。而伪元素则不是,尽管它类似于一个简单的选择器。
然而,对于像:hover1这样的用户操作伪类,如果您只需要在用户与伪元素本身交互而不是与a元素交互时应用此效果,那么除了通过一些模糊的依赖布局的变通方法外,这是不可能的。正如文中所暗示的,标准CSS伪元素目前不能有伪类。在这种情况下,您需要将:hover应用到实际的子元素上,而不是伪元素上。
1当然,这并不适用于链接伪类,比如问题中的:visited,因为伪元素不是链接。
写a:hover::before而不是a::before:hover: example。
BoltClock的答案是正确的。我唯一想追加的是,如果你只想选择伪元素,就输入一个span。
例如:
<li><span data-icon='u'></span> List Element </li>
而不是:
<li> data-icon='u' List Element</li>
这样你就可以简单地说
ul [data-icon]:hover::before {color: #f7f7f7;}
这将只突出显示伪元素,而不是整个li元素。
或者你可以设置pointer-events:none到你的a元素,pointer-event:all到你的a:before元素,然后添加悬停CSS到一个元素:
a{
pointer-events: none;
}
a:before{
pointer-events: all
}
a:hover:before{
background: blue;
}