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
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 :hover
1, 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.
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 .
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
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:"ಕನ್ನಡ";
}
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ć
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
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
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