Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menggunakan CSS untuk Menggunakan Kesan Tuding pada Berbilang Elemen Secara serentak?

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

Mary-Kate Olsen
Lepaskan: 2024-11-27 07:46:10
asal
380 orang telah melayarinya

How Can I Use CSS to Apply Hover Effects to Multiple Elements Simultaneously?

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>
Salin selepas log masuk

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>
Salin selepas log masuk

CSS:

.section {
    background: #ccc;
}

.layer {
    background: #ddd;
}

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

.section:hover .layer {
    border: 2px solid #F90;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan