Bagaimana untuk Menghalang Kesan Hover Elemen Induk daripada Tercetus Apabila Melayang di Atas Elemen Kanak-kanak?

Kesan Tuding pada Elemen Ibu Bapa dan Anak

Untuk menangani cabaran melumpuhkan kesan tuding elemen induk apabila kursor bergerak ke atas anak bersarang elemen, mari kita pertimbangkan penyelesaian berikut:

CSS :has Selector (diperkenalkan pada 2024)

Dengan pengenalan CSS :has selector, anda boleh terus menggayakan elemen induk berdasarkan keadaan tuding anaknya. Contohnya:

.parent:has(.child:hover) {
    background: normal;
}

Kod ini memastikan bahawa apabila kursor melayang di atas elemen anak dengan kelas "anak", warna latar belakang elemen induk dengan kelas "ibu bapa" kembali kepada keadaan asalnya.

Tipu Elemen Adik Beradik

Sebelum pemilih :has, penyelesaiannya ialah menggunakan elemen adik beradik:

<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

Elemen adik beradik ialah diletakkan menggunakan kedudukan mutlak untuk bertindih elemen anak. Apabila anda menuding pada elemen anak, kesan tuding unsur adik beradik akan diaktifkan, mengatasi kesan tuding unsur induk.

.child:hover ~ .sibling {
    background: #FFF; // Override parent's background color
}

Penghadan

Perhatikan bahawa penyelesaian ini bergantung pada struktur elemen bersarang dan mungkin tidak berfungsi dalam semua kes.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Kesan Hover Elemen Induk daripada Tercetus Apabila Melayang di Atas Elemen Kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!