a:beforeiçin
:hoverve
:visited` koşulu nasıl yazılır?
a:before:hover'ı deniyorum ama çalışmıyor
Bu, gerçekte ne yapmaya çalıştığınıza bağlıdır.
Sadece a
öğesi bir sözde sınıfla eşleştiğinde :before
sözde öğesine stil uygulamak istiyorsanız, bunun yerine a:hover:before
veya a:visited:before
yazmanız gerekir. Sözde öğenin sözde sınıftan sonra geldiğine dikkat edin (ve aslında, tüm seçicinin en sonunda). Bunların iki farklı şey olduğuna da dikkat edin; her ikisini de "pseudo-selectors" olarak adlandırmak, bunun gibi sözdizimi sorunlarıyla karşılaştığınızda kafanızı karıştıracaktır.
CSS3 yazıyorsanız, bu ayrımı daha net hale getirmek için bir sözde öğeyi çift iki nokta üst üste ile gösterebilirsiniz. Dolayısıyla, a:hover::before
ve a:visited::before
. Ancak IE8 ve daha eski tarayıcılar için geliştirme yapıyorsanız, tek iki nokta üst üste kullanmaktan kurtulabilirsiniz.
Sözde sınıfların ve sözde öğelerin bu özel sıralaması spec'de belirtilmiştir:
Bir sözde öğe, bir seçicideki basit seçicilerin son dizisine eklenebilir.
Bir basit seçiciler dizisi, bir birleştirici ile ayrılmamış bir basit seçiciler zinciridir. Her zaman bir tür seçici veya bir evrensel seçici ile başlar. Dizide başka hiçbir tür seçiciye veya evrensel seçiciye izin verilmez.
basit seçici bir tür seçici, evrensel seçici, nitelik seçici, sınıf seçici, kimlik seçici veya sözde sınıftır.
Sözde sınıf basit bir seçicidir. Ancak bir sözde öğe, basit bir seçiciye benzese de değildir.
Ancak, :hover
1 gibi kullanıcı eylemi sözde sınıfları için, kullanıcı a
öğesiyle değil de sözde öğenin kendisiyle etkileşime girdiğinde bu etkinin yalnızca uygulanmasını istiyorsanız, bu, düzene bağlı bazı belirsiz geçici çözümler dışında mümkün değildir. Metinde ima edildiği gibi, standart CSS sözde elemanları şu anda sözde sınıflara sahip olamaz. Bu durumda, :hover
öğesini sözde öğe yerine gerçek bir alt öğeye uygulamanız gerekecektir.
1 Elbette bu, sorudaki gibi :visited
gibi bağlantı sözde sınıfları için geçerli değildir, çünkü sözde öğeler bağlantı değildir.</sub>
a::before:hoveryerine
a:hover::before` yazın: [örnek](
Fareyle üzerine gelindiğinde menü bağlantısı'nın metnini değiştirmek için. (Fareyle üzerine gelindiğinde farklı dilde metin) İşte
[jsfiddle örneği][1]
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:"ಕನ್ನಡ";
}