Bolehkah CSS Mengubah Suai Gaya Satu Kelas semasa Melayang Di Atas Yang Lain?

Menggunakan CSS untuk Mengubah Suai Gaya Kelas pada Tuding

Bolehkah satu peraturan CSS digunakan untuk mengubah sifat CSS satu kelas apabila menuding di atas elemen daripada kelas yang berasingan? Adakah mungkin untuk membuat peraturan seperti:

.item:hover .wrapper { /*some css*/ }

di mana .wrapper tidak terkandung secara langsung dalam .item, sebaliknya terletak di tempat lain dalam dokumen?

Penyelesaian CSS

Ya, ini boleh dilakukan menggunakan pemilih CSS. Terdapat dua pendekatan yang boleh anda ambil apabila menggunakan :hover untuk mengubah suai gaya elemen lain:

1. Elemen Keturunan atau Anak

Jika .wrapper ialah elemen anak .item, anda boleh menggunakan pemilih ini:

.item:hover .wrapper {
    /* CSS properties to change */
}

2. Elemen Adik Beradik

Jika .wrapper ialah elemen adik beradik .item, muncul selepas .item dalam DOM, anda boleh menggunakan pemilih ini:

.item:hover ~ .wrapper {
    /* CSS properties to change */
}

Penyelesaian JavaScript

Walaupun JavaScript tidak diperlukan untuk tugasan mudah ini, anda boleh menggunakannya untuk mencapai kesan yang diingini. Berikut ialah contoh:

document.getElementsByClassName('item')[0].addEventListener('mouseover', function() {
  document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
});

Maklumat Tambahan

Adalah penting untuk ambil perhatian bahawa elemen menu contoh anda nampaknya menggunakan kelas yang berbeza. Apabila menuding pada elemen, submenunya muncul di sebelah kanan sebagai tindanan. Kelas yang mengawal latar belakang submenu dinamakan "pembungkus." Untuk mencapai kesan yang diingini, gunakan pendekatan pemilih adik beradik yang diterangkan di atas.

Rujukan

• [Pemilih CSS 2.1](https://www.w3.org /TR/CSS21/selectors.html)

Atas ialah kandungan terperinci Bolehkah CSS Mengubah Suai Gaya Satu Kelas semasa Melayang Di Atas Yang Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!