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

Tuding pada Elemen, Kesan pada Berbilang Elemen dalam CSS

Dalam reka letak HTML, anda mungkin menghadapi senario di mana menuding pada elemen harus mencetuskan kesan ke atas pelbagai elemen berkaitan. Pertimbangkan kod HTML berikut:

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

Kedua-dua kelas "imej" dan "lapisan" mempunyai sempadan dengan warna berbeza untuk keadaan biasa dan tudingnya. Matlamatnya ialah untuk menukar warna jidar pada kedua-dua elemen apabila menuding di atas elemen "lapisan" dan sebaliknya.

Penyelesaian CSS:

Mencapai kesan ini tanpa JavaScript adalah mungkin menggunakan CSS. Berikut ialah contoh:

HTML:

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

CSS:

.section {
    background: #ccc;
}

.layer {
    background: #ddd;
}

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

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

Penjelasan:

• Pemilih ".section:hover img" menentukan bahawa apabila elemen ".section" dituding di atas, elemen "img" di dalamnya harus mempunyai sempadan pepejal 2px dengan warna #333.
• Begitu juga, pemilih ".section:hover .layer" menyasarkan elemen ".layer" dalam ".section" dan menukar warna jidarnya kepada #F90 on tuding.

CSS ini memastikan bahawa apabila anda menuding pada elemen "lapisan", kedua-dua elemen "imej" dan "lapisan" akan dikemas kini warna sempadannya, mewujudkan kesan yang diingini tanpa sebarang skrip.

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