如何为a：before和a：after编写：hover条件？

CSS

宝儿

2020-03-23

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

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

第2629篇《如何为a：before和a：after编写：hover条件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

JinJin凯 2020.03.23

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

十三西里Sam 2020.03.23

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

Gil 2020.03.23

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

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

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

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