我怎么能写:悬停和:访问条件的a:之前?

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


当前回答

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

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

其他回答

要更改鼠标悬停时的菜单链接文本(悬停时的不同语言文本),下面是

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: "ಕನ್ನಡ";
}

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

尝试使用.card-listing:hover::after, hover, and after使用::。它会起作用的。

或者你可以设置pointer-events:none到你的a元素,pointer-event:all到你的a:before元素,然后添加悬停CSS到一个元素:

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

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元素。