Bagaimanakah Saya Boleh Mencipta Kesan Hover Tersegerak pada Berbilang Elemen Menggunakan CSS Sahaja?

Mencapai Kesan Tuding pada Berbilang Elemen

Dalam pembangunan web, adalah perkara biasa untuk menghadapi senario di mana berbilang elemen perlu bertindak balas terhadap interaksi tuding. Pertimbangkan struktur HTML berikut:

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

Kedua-dua elemen '.image' dan '.layer' mempunyai sempadan dengan warna yang berbeza untuk keadaan biasa dan tudingnya. Matlamatnya adalah untuk menukar warna jidar lekukan bagi kedua-dua elemen apabila elemen '.layer' dituding di atas.

Penyelesaian CSS

Untuk mencapai ini tanpa JavaScript, CSS boleh digunakan:

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

.section:hover img {
  border: 2px solid #333;
}

.section:hover .layer {
  border: 2px solid #F90;
}

Dalam kod ini:

• '.section' kelas menentukan warna latar belakang.
• Kelas '.layer' mentakrifkan warna latar belakang dan lebar jidar untuk elemen '.layer'.
• Peraturan '.section:hover img' menukar warna sempadan imej apabila '.section' dituding di atas.
• Peraturan '.section:hover .layer' diubah suai warna sempadan elemen '.layer' di bawah keadaan tuding yang sama, memastikan kedua-dua elemen bertindak balas terhadap interaksi tuding pada elemen '.layer'.

Penyelesaian ini menyediakan cara yang elegan untuk mencipta disegerakkan kesan tuding untuk berbilang elemen tanpa bergantung pada skrip.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Hover Tersegerak pada Berbilang Elemen Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!