Bolehkah saya Menggayakan Elemen Induk pada Elemen Anak Tuding dalam CSS?

Menggayakan Elemen Induk pada Elemen Anak Tuding

Soalan: Adakah mungkin untuk mengubah suai rupa elemen induk apabila menuding pada elemen kanak-kanak, walaupun tanpa pemilih induk khusus masuk CSS?

Konteks: Pertimbangkan senario dengan butang "Padam". Apabila pengguna menggerakkan kursor ke atas butang, kami ingin menyerlahkan bahagian induk yang terkandung di dalamnya.

Jawapan:

Walaupun pemilih induk sebenar tidak wujud dalam CSS, terdapat kaedah untuk mencapai kesan yang diingini menggunakan Lapisan Cascading (z-index) atau pembungkus pseudo.

Kaedah Pseudo-Wrapper:

Kaedah ini melibatkan mencipta elemen pseudo-wrapper yang bertindak sebagai lapisan tidak kelihatan di atas induk. Apabila tetikus melayang di atas elemen anak, ia berinteraksi dengan pembungkus pseudo, yang seterusnya mencetuskan perubahan CSS pada induk.

Kod:

div.parent {
  z-index: 0;
}

div.child {
  z-index: 1;
  pointer-events: auto;
}

div.child:hover + div.parent {
  background-color: yellow;
}

Penjelasan:

• Kami menetapkan indeks-z rendah kepada ibu bapa, memastikan ia berada di bawah kanak-kanak.
• Kanak-kanak itu mempunyai indeks z yang lebih tinggi dan peristiwa penuding ditetapkan kepada automatik, membenarkan peristiwa tetikus melaluinya.
• Apabila kanak-kanak itu dilegar, pemilih adik beradik bersebelahan ( ) menyasarkan ibu bapa dan menggunakan warna latar belakang kuning.

Atas ialah kandungan terperinci Bolehkah saya Menggayakan Elemen Induk pada Elemen Anak Tuding dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!