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

2019-01-01 00:03发布

站内文章 / HTML/CSS
59 0 0

问题:

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

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

回答1:

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.



回答2:

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



回答3:

To change menu link\'s text on mouseover. (Different language text on hover) here is the

jsfiddle example

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


回答4:

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



回答5:

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



回答6:

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



标签： css css-selectors pseudo-element pseudo-class
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~