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

Menggayakan Elemen Anak pada Tuding Ibu Bapa

Perlu mengubah suai penampilan elemen kanak-kanak apabila melayang di atas induknya? Masukkan pemilih :hover CSS yang hebat.

Untuk melakukan ini:

.parent:hover .child {
  /* Styling for the child element when the parent is hovered */
}

Dengan pemilih ini, anda menyasarkan elemen anak apabila induk, ".parent," dituding. Penggabung keturunan (ruang) memilih keturunan yang sepadan dengan ".anak."

Sebagai contoh:

.parent:hover .child {
  background-color: #ccc;
}

Ini menjadikan latar belakang elemen anak menjadi kelabu apabila menuding di atas induk.

Contoh langsung:

<div class="parent">
  <p class="child">Hover me</p>
</div>

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

.child {
  background-color: white;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background-color: #ccc;
  transform: scale(1.1);
}

Contoh ini menukar latar belakang elemen kanak-kanak kepada kelabu dan naikkan sedikit pada tuding induk.

Ingat, sokongan penyemak imbas anda dilindungi di sini. Selami CSS dan tingkatkan pengalaman pengguna anda!

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!