Bagaimanakah Saya Boleh Menggayakan Elemen Kanak-Kanak Apabila Ibu Bapa Mereka Dilegarkan Menggunakan CSS?

Menyasarkan Elemen Kanak-kanak pada Tuding Ibu Bapa

Soalan:

Bagaimanakah kita boleh mengubah suai penggayaan elemen kanak-kanak apabila elemen induk diletakkan di atas, lebih baik menggunakan CSS? Adakah ini boleh dicapai dengan pemilih :hover?

Jawapan:

Ya, CSS menyediakan penyelesaian yang mudah untuk keperluan ini. Dengan menggunakan pseudoclass :hover dan descendant combinator, kami boleh menyasarkan elemen anak secara khusus dalam elemen induk berlegar.

.parent:hover .child {
   /* ... */
}

Dalam peraturan ini, pseudoclass :hover digunakan pada elemen .parent apabila kursor sedang berlegar atasnya. Penggabung keturunan (ruang) kemudian memilih mana-mana elemen keturunan yang sepadan dengan kelas .anak. Ini membolehkan kami mengubah suai gaya elemen kanak-kanak sebagai tindak balas kepada peledakan elemen induk.

Selain itu, penyemak imbas moden menyokong pelbagai sifat CSS yang boleh diubah suai untuk elemen anak, termasuk warna, fon, latar belakang dan peralihan. Berikut ialah contoh untuk menggambarkan konsep:

.parent {
  border: 1px dashed gray;
  padding: 0.5em;
  display: inline-block;
}

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}

<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Elemen Kanak-Kanak Apabila Ibu Bapa Mereka Dilegarkan Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!