Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Bekas Induk Hanya Menggunakan CSS Apabila Menuding Pada Elemen Kanak-kanak?

Tukar Warna Latar Belakang Bekas Induk pada Tuding Anak (CSS Sahaja)

Manakala soalan tentang memilih elemen induk dengan CSS sering ditandakan sebagai pendua, ia mengabaikan keperluan untuk penyelesaian praktikal. Khususnya, isu menukar warna latar belakang bekas induk apabila menuding pada anaknya boleh ditangani melalui pendekatan CSS sahaja.

Peristiwa Penunjuk dan Tuding:

Untuk mencapai kesan ini, kita boleh memanipulasi peristiwa penunjuk dan :hover pseudo-class:

1. Tetapkan acara penuding: tiada pada induk. Ini menghalang elemen induk daripada menerima sebarang acara tuding.
2. Tentukan warna latar belakang ibu bapa yang diingini bertukar pada tuding.
3. Tetapkan acara penuding: auto pada kanak-kanak. Ini membenarkan elemen kanak-kanak mencetuskan acara tuding, walaupun ibu bapa mengabaikannya.

Contoh:

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

<div>
  <a href="#">Anchor Text</a>
</div>

Penyelesaian ini menangkap acara tuding pada elemen anak secara berkesan, membenarkan latar belakang bekas induk berubah apabila anak dituding, semuanya tanpa menggunakan JavaScript.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Bekas Induk Hanya Menggunakan CSS Apabila Menuding Pada Elemen Kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!