Bagaimana untuk Menggayakan Elemen Kanak-kanak pada Hover Induk Menggunakan CSS?

Kesan Tuding pada Elemen Kanak-kanak Menggunakan CSS

Untuk mengubah suai gaya elemen kanak-kanak apabila elemen induknya dituding di atas, anda boleh menggunakan teknik CSS berikut:

.parent:hover .child {}

Peraturan CSS ini menggunakan pseudoclass :hover untuk menyasarkan elemen induk (".parent") dalam keadaan berlegar. Penggabung keturunan (ruang) dalam peraturan memilih mana-mana elemen keturunan yang sepadan dengan kelas ".child".

Dengan menggunakan peraturan ini, anda boleh mengubah sifat elemen anak berdasarkan status tuding induk unsur. Sebagai contoh, coretan kod berikut menukar warna latar belakang elemen ".child" dan menskalakannya apabila elemen ".parent"nya dilegar di atas:

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

Pendekatan ini menawarkan keserasian merentas pelayar dan berkesan membolehkan anda menggayakan elemen kanak-kanak berdasarkan interaksi dengan elemen induk mereka.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen Kanak-kanak pada Hover Induk Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!