Jak napisać: hover warunek dla a: before I A: after?

Jak napisać :hover i :visited warunek dla a:before?

Próbuję a:before:hover ale to nie działa

Author: BoltClock, 2011-04-25
Source

6 answers

To zależy od tego, co naprawdę próbujesz zrobić.

Jeśli po prostu chcesz zastosować style do pseudo-elementu :before, gdy element a pasuje do pseudo-klasy, musisz zamiast tego napisać a:hover:before lub a:visited:before. Zauważ, że pseudo-element pojawia się po pseudo-klasie(a w rzeczywistości na samym końcu całego selektora). Zauważ również, że są to dwie różne rzeczy; nazywanie ich obydwoma "pseudo-selektorami" zdezorientuje cię, gdy napotkasz problemy ze składnią, takie jak ten.

Jeśli piszesz CSS3, możesz oznaczyć pseudo-element podwójnymi dwukropkami, aby to rozróżnienie było jaśniejsze. Stąd a:hover::before i a:visited::before. Ale jeśli tworzysz dla starszych przeglądarek, takich jak IE8 i starszych, możesz uniknąć używania pojedynczych dwukropków.

Ta specyficzna kolejność pseudoklas i pseudoelementów jest określona w spec :

Jeden pseudoelement może być dołączony do ostatniej sekwencji prostych selektorów w selektor.

A Sekwencja prostych selektorów jest łańcuchem prostych selektorów, które nie są oddzielone kombinatorem. Zawsze zaczyna się od selektora typu lub uniwersalnego selektora. W sekwencji nie jest dozwolony żaden inny selektor typu ani uniwersalny selektor.

A prosty selektor jest albo selektorem typu, uniwersalnym selektorem, selektorem atrybutów, selektorem klas, selektorem ID lub pseudoklasą.

Pseudo-klasa jest prostym selektorem. A pseudo-element jednak nie jest, mimo że przypomina prosty selektor.

Jednak dla pseudo-klas user-action, takich jak :hover1, jeśli chcesz, aby ten efekt zastosował tylko , gdy użytkownik wchodzi w interakcję z pseudo-elementem, ale nie z elementem a, to nie jest to możliwe inaczej niż poprzez jakieś niejasne obejście zależne od układu. Jak sugeruje tekst, standardowe pseudoelementy CSS nie mogą obecnie posiadać pseudo-klas. W takim przypadku będziesz musiał Zastosuj :hover do rzeczywistego elementu potomnego zamiast pseudo-elementu.

1oczywiście nie dotyczy to pseudoklas, takich jak :visited jak w pytaniu, ponieważ pseudoelementy nie są linkami.

 419
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-13 18:11:39

Napisz a:hover::before zamiast a::before:hover: Przykład .

 81
Author: sandeep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-30 11:21:18

Aby zmienić tekst linku menu na mouseover. (Tekst w innym języku po najechaniu na kursor) oto

Przykład 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:"ಕನ್ನಡ";
}
 4
Author: Rao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-24 09:17:31

Spróbuj użyć .card-listing:hover::after hover i after używając :: będzie działać

 3
Author: subindas pm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-09 12:48:18

Odpowiedź Boltclocka jest prawidłowa. Jedyną rzeczą, którą chcę dodać, jest to, że jeśli chcesz wybrać tylko pseudo element, umieść w span.

Na przykład: 

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

Zamiast: 

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

W ten sposób możesz po prostu powiedzieć 

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

Który podświetli tylko pseudo element, a nie cały element li

 0
Author: bbrinx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-24 18:09:17

Możesz również ograniczyć swoją akcję do jednej klasy używając prawego nawiasu ( " > " ), tak jak zrobiłem w tym kodzie: 

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

Uwaga: Przełącznik hover: before działa tylko na .Klasa test1

 -2
Author: Stefan Gruenwald,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-30 17:16:47