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

Pada Hover of Child, Tukar Warna Latar Belakang Bekas Induk (CSS Sahaja)

Walaupun secara amnya mustahil untuk menyasarkan elemen induk secara langsung dengan CSS , terdapat penyelesaian penyelesaian untuk senario tertentu. Satu senario sedemikian ialah menukar warna latar belakang bekas induk apabila menuding pada elemen anaknya.

Penyelesaian: Peristiwa Penunjuk dan :Tuding

Kaedah ini memanfaatkan peristiwa penuding dan itu: hover kelas pseudo:

1. acara-penunjuk: tiada pada induk: Ini menjadikan elemen induk tidak interaktif, mengabaikan acara tuding.
2. : tuding pada induk: Tentukan perubahan warna latar belakang yang diingini pada elemen induk apabila berlegar.
3. acara-penunjuk: auto pada kanak-kanak: Dayakan semula acara tuding hanya untuk elemen kanak-kanak, membenarkan mereka mencetuskan perubahan warna latar belakang pada induk.

Keserasian:

• Berfungsi dalam IE 11 dan Edge, Chrome dan Firefox.
• Nota: IE 11 dan Edge memerlukan elemen kanak-kanak mempunyai paparan: inline-block atau paparan: blok untuk penunjuk acara ke kerja.

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 id="Heading">Heading</h1>
  <a href="#">Anchor Text</a>
</div>

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