发表新帖
发表新帖

How to write :hover condition for a:before and a:after?

后端 未结
关注
7 1610
北恋
北恋 2020-11-22 13:08

How to write :hover and :visited condition for a:before?

I\'m trying a:before:hover but it\'s not working

相关标签:
7条回答
  • 感动是毒
    2020-11-22 13:12

    Try to use .card-listing:hover::after hover and after using :: it wil work

    0 讨论(0)
  • 独厮守ぢ
    2020-11-22 13:15

    Write a:hover::before instead of a::before:hover: example.

    0 讨论(0)
  • 萌比男神i
    2020-11-22 13:22

    This depends on what you're actually trying to do.

    If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.

    If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.

    This specific order of pseudo-classes and pseudo-elements is stated in the spec:

    One pseudo-element may be appended to the last sequence of simple selectors in a selector.

    A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

    A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

    A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.

    However, for user-action pseudo-classes such as :hover1, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.

    1 Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.

    0 讨论(0)
  • 长情又很酷
    2020-11-22 13:22

    BoltClock's answer is correct. The only thing I want to append is that if you want to only select the pseudo element, put in a span.

    For example: 

    <li><span data-icon='u'></span> List Element </li>

    instead of:

    <li> data-icon='u' List Element</li>

    This way you can simply say

    ul [data-icon]:hover::before {color: #f7f7f7;}

    which will only highlight the pseudo element, not the entire li element

    0 讨论(0)
  • 轮回少年
    2020-11-22 13:23

    You can also restrict your action to just one class using the right pointed bracket (">"), as I have done in this code:

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

    Note: The hover:before switch works only on the .test1 class

    0 讨论(0)
  • 夕颜
    2020-11-22 13:28

    or you can set pointer-events:none to your a element and pointer-event:all to your a:before element, and then add hover CSS to a element

    a{
    pointer-events:none;
}
a:before{
    pointer-events:all
}
a:hover:before{
    background:blue;
}
    0 讨论(0)
 看不清?
提交回复
热议问题