Bagaimanakah Saya Boleh Menggunakan Kesan Hover pada Berbilang Elemen CSS Secara serentak?

Menggunakan Kesan Tuding merentas Berbilang Elemen dalam CSS

Apabila menuding pada elemen tertentu, anda mungkin mahu menggunakan kesan pada berbilang elemen berkaitan. Sebagai contoh, anda mempunyai dua elemen bersebelahan, "imej" dan "lapisan," setiap satu dengan sempadan yang berasingan. Bagaimanakah anda boleh menjadikannya supaya menuding pada satu elemen menjejaskan warna sempadan kedua-dua elemen?

Penyelesaian Tanpa JavaScript

Untuk mencapai ini tanpa JavaScript, anda boleh menggunakan CSS seperti ini:

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

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

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

Dalam contoh ini, apabila anda menuding pada elemen ".section", "img" di dalamnya akan mempunyai sempadan pepejal 2px dengan warna #333. Pada masa yang sama, elemen ".layer" dalam ".section" juga akan menerima jidar pepejal 2px dengan warna #F90. Tingkah laku yang sama berlaku apabila anda menuding pada elemen ".layer".

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