Bolehkah CSS Sendiri Mengendalikan Kesan Hover pada Berbilang Elemen Secara serentak?

Kesan Melayang untuk Berbilang Elemen dengan CSS

Apabila berhadapan dengan cabaran untuk menggunakan kesan tuding pada berbilang elemen secara serentak, kebijaksanaan konvensional mungkin mencadangkan JavaScript sebagai penyelesaian. Anehnya, CSS sahaja boleh menangani isu ini dengan berkesan.

Mari kita pertimbangkan struktur HTML di mana dua elemen, imej dan lapisan, masing-masing mempunyai sempadan dengan warna yang berbeza untuk keadaan biasa dan tudingnya. Untuk mencipta gelagat yang diingini apabila menuding di atas mana-mana elemen mengaktifkan warna sempadan tuding untuk kedua-duanya, ikut langkah berikut:

1. Tentukan gaya asas:

   • Gunakan CSS untuk menetapkan warna latar belakang untuk .section dan .layer elemen.

2. Gunakan kesan tuding pada elemen .section:

   • Apabila kursor menuding ke atas .section, kemas kini gaya sempadan untuk imej dalam ia.

3. Gunakan kesan tuding pada elemen .layer:

   • Begitu juga, apabila menuding di atas .layer, ubah suai gaya sempadan lapisan elemen.

Berikut ialah contoh kod:

/* Define base styles */
.section {
  background: #ccc;
}
.layer {
  background: #ddd;
}

/* Hover effects on .section */
.section:hover img {
  border: 2px solid #333;
}

/* Hover effects on .layer */
.section:hover .layer {
  border: 2px solid #F90;
}

CSS ini memastikan bahawa melayang di atas sama ada imej atau lapisan mengaktifkan warna sempadan tuding untuk kedua-duanya elemen. Dan itu sahaja yang diperlukan, tiada JavaScript diperlukan!

Atas ialah kandungan terperinci Bolehkah CSS Sendiri Mengendalikan Kesan Hover pada Berbilang Elemen Secara serentak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!