Cara Menggunakan :hover untuk Mengubah suai CSS Kelas Berbeza?

Cara Menggunakan :hover untuk Mengubah suai CSS Kelas Lain

Terdapat contoh apabila anda mungkin mahu mengubah suai CSS satu kelas apabila melayang pada elemen dari kelas lain hanya menggunakan CSS. Teknik ini amat berguna jika anda ingin mencipta kesan yang menarik secara visual tanpa bergantung pada JavaScript.

Penyelesaian CSS Sahaja:

Untuk mencapai kesan ini menggunakan CSS sahaja, terdapat ialah dua pendekatan utama:

• Elemen yang anda ingin ubah suai (F) ialah sama ada elemen anak bagi elemen yang anda tuding pada (E), atau
• F ialah elemen kemudian- adik beradik atau keturunan E (E muncul dalam markup/DOM sebelum F).

Pilihan Pertama: F sebagai Anak E

Jika F ialah elemen anak E, anda boleh menggunakan pemilih CSS berikut:

<code class="css">.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}</code>

Pemilih ini akan menggunakan peraturan CSS yang ditentukan pada elemen .wrapper hanya apabila elemen .item dilegarkan.

Pilihan Kedua: F sebagai Adik Beradik E

Jika F ialah elemen adik-beradik E, anda boleh menggunakan pemilih CSS berikut:

<code class="css">.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}</code>

Pemilih ini akan menggunakan peraturan CSS pada elemen .wrapper hanya apabila elemen .item dilegarkan, dengan mengandaikan bahawa .wrapper ialah adik beradik langsung .item. Anda juga boleh menggunakan .item:hover .wrapper jika .wrapper ialah adik beradik terdekat .item tanpa unsur lain di antara mereka.

Penyelesaian JavaScript:

Jika anda tidak boleh mencapai kesan yang diingini menggunakan CSS sahaja, anda boleh menggunakan JavaScript. Berikut ialah contoh mudah:

<code class="javascript">document.getElementsByClassName('item')[0].onmouseover = function() {
    document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
};</code>

Kod JavaScript ini akan mengubah suai sifat latar belakang elemen .wrapper apabila elemen .item dilegarkan. Ambil perhatian bahawa penyelesaian ini tidak secekap atau elegan seperti pendekatan CSS sahaja.

Kesimpulan:

Menggunakan CSS atau JavaScript, anda boleh mengubah suai CSS satu kelas berdasarkan legar kelas lain. Penyelesaian CSS sahaja adalah lebih disukai kerana kecekapan dan kesederhanaannya, tetapi JavaScript boleh digunakan dalam kes di mana CSS tidak mencukupi.

Atas ialah kandungan terperinci Cara Menggunakan :hover untuk Mengubah suai CSS Kelas Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!