Bagaimana untuk Menukar Warna Latar Belakang Ibu Bapa pada Child Hover dengan CSS?

Tidak Dapat Menyasarkan Elemen Induk secara Langsung dengan CSS

Masalah: Cara menukar warna latar belakang bekas induk apabila melayang di atas anak elemen menggunakan CSS sahaja?

Penyelesaian: Menggunakan acara penunjuk dan :hover

Keserasian:

• IE 11 dan Edge
• Chrome
• Firefox

Langkah:

1. Lumpuhkan acara penunjuk pada induk div: Ini memastikan bahawa div mengabaikan :hover acara.

div {
  pointer-events: none;
}

2. Tukar latar belakang induk pada tuding: Tetapkan warna latar belakang untuk ditukar apabila induk itu dituding.

div:hover {
  background: #F00;
}

3. Dayakan acara penunjuk pada kanak-kanak: Ini membenarkan acara tuding untuk pencetus hanya apabila kanak-kanak itu dilegar.

div > a {
  pointer-events: auto;
}

Penjelasan:

Apabila elemen anak dilegar, div induk juga dilegar kerana harta penunjuk-peristiwa. Walau bagaimanapun, kelas pseudo hover ibu bapa diabaikan kerana tetapan acara penuding: tiada. Dengan mendayakan peristiwa penuding pada kanak-kanak, peristiwa tuding dicetuskan semata-mata pada kanak-kanak, menyebabkan warna latar belakang ibu bapa berubah seperti yang dikehendaki.

Nota: Dalam IE 11 dan Edge, elemen anak mesti mempunyai paparan: blok sebaris atau paparan: blok untuk acara penunjuk berfungsi dengan baik.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Warna Latar Belakang Ibu Bapa pada Child Hover dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!