Bagaimanakah Saya Boleh Menggayakan Elemen Induk Apabila Anaknya Dilegar Tanpa Menggunakan Pemilih Induk?

Menggayakan Elemen Induk pada Tuding Anak Tanpa Pemilih Induk

Dalam CSS, menyasarkan terus elemen ibu bapa berdasarkan interaksi kanak-kanak adalah mencabar kerana kekurangan pemilih ibu bapa. Walau bagaimanapun, terdapat penyelesaian bijak yang membolehkan kami mencapai kesan ini: mencipta pembungkus pseudo dalam elemen induk.

Pertimbangkan contoh yang diberikan, di mana butang padam menyerlahkan bahagian induknya pada tuding:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

Untuk menyerlahkan bahagian induk, kami akan mencipta div anak dengan acara penuding ditetapkan kepada auto, sambil melumpuhkannya untuk ibu bapa:

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

Kini, ibu bapa menjadi telus kepada peristiwa tetikus, membenarkan div kanak-kanak mencetuskan kesan tuding. Dan apabila acara tuding berlaku pada kanak-kanak, kami boleh menggayakan ibu bapa seperti yang dikehendaki:

div.parent:hover {
    background: yellow;
}

Teknik ini memastikan elemen induk bertindak balas terhadap interaksi tuding pada anaknya, dengan berkesan mensimulasikan gelagat pemilih ibu bapa. Ambil perhatian bahawa acara penuding: auto harus dipulihkan untuk elemen kanak-kanak lain dengan pendengar acara untuk mengekalkan fungsinya.

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