如何为a:before和a:after编写:hover条件?

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

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

JinJin凯2020/03/23 10:00:30

a:hover::before而不是a::before:hoverexample

十三西里Sam2020/03/23 10:00:30

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

Gil2020/03/23 10:00:30

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

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:"ಕನ್ನಡ";
}
猴子2020/03/23 10:00:30

您也可以使用右尖括号(“>”)将操作限制为一个类,就像我在这段代码中所做的那样:

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