Bolehkah Kesan Hover CSS Mempengaruhi Elemen Bukan Sasaran?

Bolehkah Kesan Tuding CSS Melanjutkan kepada Elemen Berbeza?

Dalam CSS, tidak mungkin untuk menggunakan kesan tuding pada elemen yang bersebelahan atau bersarang dalam elemen lain. Ini bermakna kesan itu kekal terhad pada elemen yang digunakan dan anda tidak boleh menggunakannya untuk mempengaruhi elemen lain.

Kesan Adik Beradik Keturunan dan Bersebelahan

Walau bagaimanapun, terdapat dua pengecualian kepada peraturan ini apabila menggunakan pemilih adik beradik bersebelahan ( ) atau pemilih keturunan (>):

• Adik Beradik Bersebelahan: Jika dua elemen ialah adik beradik bersebelahan (muncul terus selepas satu sama lain dalam kod HTML), anda boleh menggunakan kesan pada satu elemen berdasarkan pada keadaan tuding yang lain menggunakan pemilih adik beradik bersebelahan. Contohnya:

#first-sibling:hover + #second-sibling {
  opacity: 0.3;
}

• Keturunan: Begitu juga, jika satu elemen adalah keturunan yang lain (bersarang di dalam), anda boleh menggunakan kesan pada keturunan berdasarkan pada keadaan tuding induk menggunakan pemilih keturunan. Contohnya:

#parent-element:hover #child-element {
  opacity: 0.3;
}

Menyelesaikan Masalah Anda

Dalam contoh khusus anda, anda ingin menukar kelegapan elemen yang dipanggil #thisElement apabila pengguna menuding pada imej dengan kelas "img." Walau bagaimanapun, anda tidak boleh terus menyasarkan #thisElement menggunakan kesan hover CSS pada "img." Sebaliknya, anda boleh mempertimbangkan:

1. Menggunakan Adik Beradik Bersebelahan: Jika #thisElement ialah adik beradik bersebelahan seterusnya imej selepasnya dalam HTML, anda boleh menggunakan:

.img:hover + #thisElement {
  opacity: 0.3;
}

2. Menggunakan Keturunan: Jika #thisElement bersarang dalam bekas imej, anda boleh menggunakan:

.img-container:hover #thisElement {
  opacity: 0.3;
}

Atas ialah kandungan terperinci Bolehkah Kesan Hover CSS Mempengaruhi Elemen Bukan Sasaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!