Bolehkah Anda Mengubah suai CSS pada Hover untuk Elemen Tidak Berkaitan?

Bolehkah Anda Mengubah suai CSS Kelas Berbeza pada Tuding?

Ramai pembangun menghadapi keperluan untuk mengubah suai CSS satu elemen apabila elemen lain elemen yang tidak berkaitan diletakkan di atas. CSS sahaja sering menimbulkan had dalam mencapai ini, mendorong penerokaan penyelesaian yang berpotensi.

Penyelesaian CSS

Syukurlah, CSS menyediakan dua pendekatan yang berkesan untuk tugas ini:

1. F sebagai Anak kepada E: Jika elemen yang CSSnya anda ingin ubah suai (F) ialah elemen anak unsur berlegar (E), gunakan:

   .item:hover .wrapper {
       /* CSS modifications for element F */
   }

   Salin selepas log masuk

2. F sebagai Adik Beradik E: Jika F bukan anak E, sebaliknya adik beradik kemudian atau keturunannya dalam DOM (muncul selepas E dalam mark-up), gunakan:

   .item:hover ~ .wrapper {
       /* CSS modifications for element F */
   }

   Salin selepas log masuk

JavaScript Alternative

Walaupun JavaScript pada umumnya tidak digalakkan untuk tugasan mudah itu, ia menawarkan pendekatan alternatif:

document.getElementsByClassName('item')[0].onmouseover = () => {
    document.getElementsByClassName('wrapper')[0].style.backgroundColor = "url('some url')";
};

Atas ialah kandungan terperinci Bolehkah Anda Mengubah suai CSS pada Hover untuk Elemen Tidak Berkaitan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!