Bagaimanakah Saya Boleh Menggayakan Elemen Induk pada Tuding Anak Tanpa Menggunakan Pemilih Induk?

Menggayakan Elemen Induk pada Tuding Anak tanpa Pemilih Induk

Walaupun CSS tidak mempunyai pemilih ibu bapa yang berdedikasi, anda masih boleh menggayakan elemen keibubapaan apabila kanak-kanak elemen dilegarkan. Dalam senario ini, kami menyasarkan untuk menyerlahkan elemen bekas apabila butang Padam yang terkandung dilegarkan di atas.

Pertimbangkan penanda HTML:

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

Tanpa ibu bapa pemilih, kita boleh memanfaatkan konsep pseudo-wrapper untuk mencapai kesan yang diingini. Dengan menetapkan peristiwa penunjuk: tiada; pada elemen induk dan acara penunjuk: auto; pada elemen kanak-kanak (pembungkus pseudo), kita boleh mencipta mekanisme pencetus.

Berikut ialah kod CSS untuk melaksanakan perkara ini:

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

Nota: Pastikan elemen kanak-kanak mempunyai elemennya sendiri pendengar acara menetapkan acara-penunjuk kepada automatik untuk mengekalkan fungsi klik.

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