我怎么能写:悬停和:访问条件的a:之前?
我正在尝试a:before:hover，但它不起作用。
当前回答
尝试使用.card-listing:hover::after, hover, and after使用::。它会起作用的。
其他回答
你也可以使用右尖括号(“>”)限制你的动作到一个类，就像我在这段代码中所做的那样:
<!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类有效
写a:hover::before而不是a::before:hover: example。
或者你可以设置pointer-events:none到你的a元素，pointer-event:all到你的a:before元素，然后添加悬停CSS到一个元素:
a{
pointer-events: none;
}
a:before{
pointer-events: all
}
a:hover:before{
background: blue;
}
尝试使用.card-listing:hover::after, hover, and after使用::。它会起作用的。
要更改鼠标悬停时的菜单链接文本(悬停时的不同语言文本)，下面是
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: "ಕನ್ನಡ";
}
