Bolehkah :hover Ubah suai Kelas CSS Luaran?

Bolehkah :hover Mengubah Suai Kelas CSS Luaran?

Dalam CSS, kita boleh menggunakan perubahan penggayaan pada elemen pada hover menggunakan pemilih :hover. Walau bagaimanapun, bagaimana jika kita mahu mengubah suai CSS elemen dalam kelas yang berbeza apabila elemen lain dilegar?

Memandangkan pemilih CSS hanya menyasarkan elemen berdasarkan hierarki atau perhubungan mereka dalam DOM, ia tidak boleh dilakukan secara langsung ubah suai CSS elemen di luar skop elemen leding semasa.

Pilihan untuk Pengubahsuaian Tidak Langsung

Walau bagaimanapun, terdapat pendekatan tidak langsung untuk mencapai kesan yang serupa:

• Hubungan Ibu Bapa-Anak: Jika elemen yang anda ingin ubah suai (E) ialah anak kepada elemen yang dilegar (F), anda boleh menggunakan pemilih :hover pada F untuk menyasarkan E .

.item:hover .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' is hovered */
}

• Hubungan Adik Beradik: Jika E ialah adik beradik F (atau keturunan salah seorang adik beradik F), anda boleh menggunakan ~ sibling combinator dalam CSS.

.item:hover ~ .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' or any of its siblings is hovered */
}

JavaScript Solution

Jika penyelesaian CSS tidak boleh dilaksanakan, anda boleh menggunakan JavaScript untuk memanipulasi sifat CSS E berdasarkan keadaan tuding F.

<code class="javascript">document.querySelector('.item').addEventListener('mouseenter', () => {
  document.querySelector('.wrapper').style.backgroundColor = 'red';
});

document.querySelector('.item').addEventListener('mouseleave', () => {
  document.querySelector('.wrapper').style.backgroundColor = '';
});</code>

Kesimpulan

Walaupun pemilih CSS sahaja tidak boleh mengubah suai kelas luaran secara langsung, hubungan ibu bapa-anak atau adik-beradik dan JavaScript menyediakan penyelesaian tidak langsung untuk mencapai kesan yang serupa.

Atas ialah kandungan terperinci Bolehkah :hover Ubah suai Kelas CSS Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!