Bagaimana cara menulis: hover condition untuk a: before dan a: after?

Jawaban:

488

Ini tergantung pada apa yang sebenarnya Anda coba lakukan.

Jika Anda hanya ingin menerapkan gaya ke :beforeelemen pseudo ketika aelemen cocok dengan kelas pseudo, Anda perlu menulis a:hover:beforeatau a:visited:beforesebagai gantinya. Perhatikan elemen pseudo muncul setelah pseudo-class (dan pada kenyataannya, di akhir seluruh pemilih). Perhatikan juga bahwa mereka adalah dua hal yang berbeda; memanggil mereka berdua "pseudo-selektor" akan membingungkan Anda setelah Anda mengalami masalah sintaksis seperti ini.

Jika Anda menulis CSS3, Anda dapat menunjukkan elemen pseudo dengan titik dua untuk membuat perbedaan ini lebih jelas. Karena itu, a:hover::beforedan a:visited::before. Tetapi jika Anda mengembangkan untuk browser lawas seperti IE8 dan yang lebih lama, maka Anda dapat menggunakan saja satu titik dua.

Urutan khusus pseudo-class dan pseudo-elements ini dinyatakan dalam spesifikasi :

Satu elemen semu dapat ditambahkan ke urutan terakhir dari pemilih sederhana dalam pemilih.

Sebuah urutan penyeleksi sederhana adalah rantai penyeleksi sederhana yang tidak dipisahkan oleh combinator a. Itu selalu dimulai dengan pemilih jenis atau pemilih universal. Tidak ada pemilih jenis lain atau pemilih universal yang diizinkan dalam urutan.

Sebuah pemilih sederhana adalah salah satu jenis pemilih, pemilih universal, pemilih atribut, pemilih kelas, ID pemilih, atau pseudo-class.

Kelas semu adalah pemilih sederhana. Elemen pseudo, bagaimanapun, tidak, meskipun menyerupai pemilih sederhana.

Namun, untuk aksi-pengguna pseudo-class seperti :hover1 , jika Anda memerlukan efek ini untuk diterapkan hanya ketika pengguna berinteraksi dengan pseudo-elemen itu sendiri tetapi bukan aelemen, maka ini tidak mungkin dilakukan selain melalui beberapa solusi yang bergantung pada tata letak yang tidak jelas. . Seperti yang tersirat oleh teks, elemen standar CSS pseudo saat ini tidak dapat memiliki kelas pseudo. Dalam hal ini, Anda perlu menerapkan :hoverelemen anak yang sebenarnya alih-alih elemen pseudo.

1 Tentu saja, ini tidak berlaku untuk menghubungkan kelas pseudo seperti :visiteddalam pertanyaan, karena elemen pseudo bukan tautan.

BoltClock
sumber
27
Harus ditunjukkan bahwa menempatkan hover pada elemen induk - yang menyebabkan dekorasi diterapkan bahkan jika pseudoelement :: after tidak berada di bawah mouse, selama induknya.
SamGoody
6
Perlu juga dicatat bahwa ada sejumlah hal yang tidak menanggapi hal ini karena cara aturan tata letak ditentukan - misalnya text-decoration.
Chris Krycho
1
@ Chris Krycho: Memang - Saya sebenarnya punya penjelasan untuk masalah khusus ini berkaitan dengan pseudo-elements di sini . Tentu saja, perlu diperjelas bahwa masalah itu sendiri tidak memiliki koneksi dengan pemilih pseudo-class / pseudo-elemen , tetapi seperti yang Anda tunjukkan, masalah tata letak.
BoltClock
@BoltClock Aku upvoted jawaban yang sangat lama setelah saya meninggalkan komentar ini. Sabas.
Chris Krycho
2
Sinlge colon (:) menunjuk pseudo-class dan double colon (: :) menunjuk pseudo-elements. Jadi itu harus: hover :: before
mikkelbreum
107

Tulis a:hover::beforebukan a::before:hover: contoh .

sandeep
sumber
2
@mikkelbreum apakah Anda memiliki referensi untuk membuktikannya?
shea
3
@ Bungeshea: Itu adalah sintaks CSS3. Lihat komentar di bawah jawaban saya (dan juga edit saya baru-baru ini). Agak tidak tepat untuk menyebutnya "sintaks yang benar" karena kedua titik tunggal dan ganda diizinkan untuk elemen pseudo CSS1 / 2. Saya akan menyebutnya sintaks yang direkomendasikan sebagai gantinya, karena satu-satunya alasan untuk terus menggunakan sintaks lama hari ini adalah untuk mendukung IE8 dan yang lebih lama.
BoltClock
@mikkelbreum @sheabunge info lebih lanjut tentang CSS2 :aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (single :memiliki dukungan yang lebih baik)
travis
itu tidak berfungsi untuk menggarisbawahi :( jsfiddle.net/porzechowski/u5dhthvq Silakan tambahkan juga tampilan: inline-block; jsfiddle.net/porzechowski/u89fo4oq
plusz
7

Untuk mengubah teks tautan menu saat mouseover. (Teks bahasa berbeda saat di arahkan) di sini adalah

contoh 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:"ಕನ್ನಡ";
}
Rao
sumber
1
Ini jawaban yang bagus. Bahkan, itu mengilhami saya untuk memperluas biola Anda sedikit dengan meningkatkan ukuran font dari teks rentang menjadi 24px agar sesuai dengan teks pengganti, menambahkan 3 ruang non-breaking sebelum dan sesudah teks pengganti sehingga mereka menempati lebar yang sama, dan ditata a:hover::beforedengan text-decoration: underline, yang menyebabkan garis bawah untuk mengambil warna merah dari teks pengganti.
Dave Land
4

Coba gunakan .card-listing:hover::after hoverdan aftergunakan ::saja

subindas pm
sumber
1

Jawaban BoltClock benar. Satu-satunya hal yang ingin saya tambahkan adalah bahwa jika Anda hanya ingin memilih elemen pseudo, masukkan rentang.

Sebagai contoh: 

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

dari pada:

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

Dengan cara ini Anda bisa mengatakannya

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

yang hanya akan menyoroti elemen pseudo, bukan seluruh elemen li

bbrinx
sumber
-2

Anda juga dapat membatasi tindakan Anda hanya pada satu kelas menggunakan braket runcing kanan (">"), 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: Arahkan kursor: sebelum sakelar hanya berfungsi pada kelas .test1

Stefan Gruenwald
sumber