Bagaimanakah Saya Boleh Menggayakan Elemen Induk Apabila Elemen Anaknya Dilegarkan?

Menggayakan Elemen Induk dengan Elemen Anak Berlegar

Adalah keperluan biasa untuk menggunakan gaya pada elemen induk apabila tindakan tertentu, seperti melayang, berlaku pada elemen kanak-kanak. Walau bagaimanapun, CSS tidak menyediakan pemilih induk asli. Namun begitu, terdapat cara kreatif untuk mencapai fungsi ini tanpa pemilih sedemikian.

Menggunakan Elemen Pseudo

Satu pendekatan ialah menggunakan elemen pseudo untuk mencipta pembalut di sekeliling induk unsur. Elemen pseudo pembalut ini boleh mempunyai sifat peristiwa penunjuk yang ditetapkan kepada automatik, membenarkan peristiwa tetikus melaluinya. Elemen induk, sebaliknya, boleh menetapkan sifat acara penunjuk kepada tiada. Ini memastikan bahawa melayang di atas elemen kanak-kanak mencetuskan acara tetikus pada elemen pseudo pembalut dan bukannya elemen induk. Dengan menggunakan gaya tuding pada elemen pseudo pembalut, anda boleh menerapkannya dengan berkesan pada elemen induk apabila elemen anak dituding ke atas.

Kod Contoh:

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

<div class="parent">
    parent - you can hover over here and it won't trigger
    <div class="child">hover over the child instead!</div>
</div>

Tambahan Nota:

• Sifat pointer-events tidak disokong oleh semua penyemak imbas, jadi adalah penting untuk menggunakan awalan penyemak imbas (cth., -webkit-pointer-events) untuk keserasian.
• Teknik ini boleh digunakan pada mana-mana senario di mana anda perlu menggayakan elemen induk berdasarkan interaksi elemen anak, seperti menukar elemen keterlihatan atau mencetuskan animasi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Elemen Induk Apabila Elemen Anaknya Dilegarkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!