怎么写:悬停条件为a:before和a:after？

Question

怎么写:hover和:visited条件a:before？

我正在尝试,a:before:hover但它不起作用

Answer 1

这取决于你实际上要做什么.

如果您只是希望:before在a元素与伪类匹配时将样式应用于伪元素,则需要编写a:hover:before或a:visited:before替代.注意伪元素配后的伪类(事实上,在整个选择器的最末端).另请注意,它们是两个不同的东西; 一旦遇到诸如此类的语法问题,将它们称为"伪选择器"会让您感到困惑.

如果您正在编写CSS3,则可以表示具有双冒号的伪元素,以使此区别更清晰.因此,a:hover::before和a:visited::before.但是如果你正在开发IE8等旧版浏览器,那么你就可以轻松使用单冒号了.

伪类和伪元素的这种特定顺序在规范中说明:

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

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

甲简单选择器可以是一个类型选择器,通用选择,属性选择器,类选择,ID选择,或伪类.

伪类是一个简单的选择器.然而,伪元素不是,即使它类似于简单的选择器.

但是,对于用户操作伪类(如:hover¹⁾,如果仅在用户与伪元素本身而不是a元素交互时才需要应用此效果,那么除了通过一些模糊的布局相关的解决方法之外,这是不可能的. .正如文本所暗示的那样,标准CSS伪元素当前不能具有伪类.在这种情况下,您将需要应用于:hover实际的子元素而不是伪元素.

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

Answer 2

写a:hover::before而不是a::before:hover:例子.

Answer 3

在鼠标悬停时更改菜单链接的文本.(悬停时不同的语言文字)这里是

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:"?????";
}

Answer 4

或者您可以设置pointer-events:none为您的a元素和pointer-event:all您的a:before元素，然后将悬停 CSS 添加到元素：

a{
    pointer-events: none;
}
a:before{
    pointer-events: all
}
a:hover:before{
    background: blue;
}

Answer 5

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