Bagaimana menulis :hover
dan :mengunjungi
kondisi a:sebelum
?
I'm mencoba a:sebelum:hover
tetapi's tidak bekerja
Hal ini tergantung pada apa yang anda're-benar mencoba untuk melakukan.
Jika anda hanya ingin menerapkan gaya ke :sebelum
pseudo-elemen ketika a
elemen pertandingan pseudo-class, anda perlu untuk menulis a:hover:sebelum
atau a:visited:sebelum
sebagai gantinya. Pemberitahuan pseudo-elemen yang datang setelah pseudo-class (dan pada kenyataannya, di akhir dari seluruh pemilih). Perhatikan juga bahwa mereka adalah dua hal yang berbeda; memanggil mereka berdua "pseudo-selector" akan membingungkan anda setelah anda menjalankan ke dalam masalah sintaks seperti yang satu ini.
Jika anda're menulis CSS3, anda dapat menunjukkan suatu pseudo-elemen dengan dua titik untuk membuat perbedaan ini lebih jelas. Oleh karena itu, a:hover::sebelum
dan a:visited::sebelum
. Tapi jika anda're berkembang untuk browser lama seperti IE8 dan lebih tua, maka anda dapat pergi dengan menggunakan satu titik saja.
Ini urutan tertentu dari pseudo-class dan pseudo-elemen ini dinyatakan dalam spec:
Satu pseudo-elemen yang dapat ditambahkan ke urutan terakhir sederhana pemilih pada pemilih.
A urutan dari yang sederhana penyeleksi rantai sederhana pemilih yang tidak dipisahkan oleh combinator. Itu selalu dimulai dengan pemilih jenis atau universal selector. Tidak ada jenis lain pemilih atau universal selector diperbolehkan dalam urutan.
A sederhana pemilih adalah salah satu jenis pemilih, universal selector, atribut selector, class selector ID selector, atau pseudo-class.
Pseudo-class adalah sederhana pemilih. Pseudo-element, bagaimanapun, adalah tidak, meskipun itu menyerupai sederhana pemilih.
Namun, untuk pengguna-aksi pseudo-kelas seperti :hover
1, jika anda membutuhkan efek ini berlaku hanya ketika pengguna berinteraksi dengan pseudo-elemen itu sendiri tapi bukan a
elemen, maka hal ini tidak mungkin selain melalui beberapa jelas tata letak tergantung pemecahan masalah. Seperti yang tersirat oleh teks, standar CSS pseudo-elemen yang saat ini tidak memiliki pseudo-kelas. Dalam hal ini, anda akan perlu untuk menerapkan :hover
untuk anak yang sebenarnya elemen bukan pseudo-element.
1 Tentu saja, ini tidak berlaku untuk link pseudo-kelas seperti :mengunjungi
seperti dalam pertanyaan, sejak pseudo-elemen aren't link.
Menulis a:hover::sebelum
bukan a::sebelum:hover
: [contoh](
Untuk mengubah menu link's teks pada mouseover. (Berbeda dengan bahasa pada teks hover) berikut ini adalah
[jsfiddle contoh][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:"ಕನ್ನಡ";
}
BoltClock's jawaban yang benar. Satu-satunya hal yang ingin saya tambahkan adalah bahwa jika anda ingin hanya memilih elemen semu, dimasukkan ke dalam span.
Misalnya:
<li><span data-icon='u'></span> List Element </li>
bukannya:
<li> data-icon='u' List Element</li>
Dengan cara ini anda hanya bisa mengatakan
ul [data-icon]:hover::before {color: #f7f7f7;}
yang hanya akan menyoroti elemen semu, tidak seluruh elemen li
Anda juga dapat membatasi tindakan anda untuk hanya satu kelas menggunakan hak menunjuk bracket (">"), seperti yang telah saya lakukan dalam kode ini:
<!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>
Catatan: hover:sebelum beralih bekerja hanya pada .test1 kelas