Bagaimanakah Saya Boleh Menggayakan Elemen Kanak-Kanak Apabila Induknya Dilegarkan?

Elemen Kanak-kanak Gaya pada Tuding Ibu Bapa

Dalam pelbagai senario, adalah wajar untuk mengubah penggayaan elemen kanak-kanak apabila pengguna menuding pada elemen induk mereka . Ini boleh dicapai terutamanya melalui penyelesaian CSS, terutamanya menggunakan pemilih pseudoclass :hover.

Sebagai contoh, jika anda ingin menukar warna bar pilihan dalam panel apabila pengguna menuding ke atas panel, CSS menawarkan pendekatan yang mudah:

.parent:hover .child {
  /* Style for child element on hover */
}

Coretan ini menggunakan pseudoclass :hover untuk menyatakan bahawa gaya berubah hanya boleh digunakan pada elemen kanak-kanak (.anak) apabila elemen induknya (.ibu bapa) dituding di atas. Pengabung keturunan (ruang) membolehkan kami memilih mana-mana keturunan unsur induk yang sepadan dengan pemilih anak.

Pertimbangkan contoh langsung ini:

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

.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;
}

Kod ini mengubah suai latar belakang warna, menukar skala dan melaraskan sempadan sisipan elemen anak apabila elemen induk dilegarkan, menunjukkan keberkesanan CSS dalam konteks ini.

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