Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Ibu Bapa pada Child Hover Menggunakan CSS?

Menukar Warna Latar Belakang Bekas Induk pada Tuding Anak dengan CSS

Persoalan bagaimana untuk mengubah warna latar belakang elemen induk apabila anaknya dilegar adalah perkara biasa. Biasanya, jenis soalan ini dianggap sebagai pendua pertanyaan berkenaan sama ada CSS menyokong pemilih induk.

Walaupun benar CSS tidak menawarkan pemilih induk langsung, terdapat penyelesaian CSS yang boleh menangani kebimbangan khusus ini.

Menggunakan Acara Penunjuk dan :hover

Teknik ini melibatkan tiga langkah:

1. Gunakan peristiwa penuding: tiada sifat pada elemen induk. Ini akan membuatkan ibu bapa mengabaikan acara tuding.
2. Tentukan perubahan warna latar belakang untuk elemen induk pada hover: parent:hover { background: #F00; }
3. Tetapkan acara penuding: auto pada elemen anak. Ini memastikan bahawa hanya kanak-kanak yang mencetuskan acara tuding, sekali gus menjejaskan ibu bapa secara tidak langsung.

Cara Ia Berfungsi:

• Apabila anak dilegar, ibu bapa juga berlegar kerana acara menggelegak.
• Walau bagaimanapun, ibu bapa pointer-events: tiada harta yang menghalangnya daripada bertindak balas kepada kelas pseudo tudingnya sendiri.
• Memandangkan anak mempunyai pointer-events: auto, ia secara berkesan mendayakan acara menggelegak dan mencetuskan induk tuding.

Contoh:

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

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

Penyelesaian ini serasi dengan penyemak imbas termasuk IE 11, Edge, Chrome dan Firefox. Untuk IE 11 dan Edge, elemen anak mesti mempunyai paparan: blok sebaris atau paparan: blok untuk mendayakan acara penunjuk.

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