Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Bekas Ibu Bapa pada Tuding Anak Menggunakan CSS?

Menukar Warna Latar Belakang Bekas Ibu Bapa pada Tuding Anak Menggunakan CSS

Ramai mungkin pada mulanya mencadangkan bahawa CSS tidak mempunyai cara untuk menyasarkan elemen induk, tetapi masalahnya menukar warna latar belakang bekas induk pada hover kanak-kanak boleh diselesaikan dengan bijak penyelesaian.

Penyelesaian CSS Menggunakan pointer-events dan :hover

Untuk mencapai kesan yang diingini, cipta tiga peraturan CSS:

1. Tetapkan pointer-events: tiada pada div induk untuk menjadikannya tidak bertindak balas terhadap acara tuding.
2. Tentukan perubahan warna latar belakang untuk induk dalam pemilih parent-div:hover.
3. Tetapkan acara penuding: auto pada elemen anak untuk mendayakan peristiwa tuding dicetuskan apabila anak dilegar.

Pendekatan ini berfungsi kerana peristiwa tuding induk diaktifkan apabila anaknya dilegar, manakala induk itu mengabaikan kelas pseudo hovernya, membenarkan acara tuding untuk dicetuskan hanya pada kanak-kanak.

Contoh

div {
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

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

Keserasian

Penyelesaian ini serasi dengan IE 11 dan Edge, Chrome dan Firefox. Walau bagaimanapun, dalam IE 11 dan Edge, elemen anak mesti mempunyai paparan: blok sebaris atau paparan: blok untuk acara penunjuk berfungsi dengan betul.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Bekas Ibu Bapa pada Tuding Anak Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!