Bagaimana untuk Memanipulasi CSS Kelas Berasingan dengan :hover?

Memanipulasi CSS Kelas Berasingan dengan :hover

Apabila bekerja dengan berbilang kelas dalam CSS, mungkin terdapat keperluan untuk mengubah suai penggayaan satu kelas berdasarkan keadaan tuding unsur lain. Walaupun kelihatan intuitif untuk menggunakan pemilih bersarang seperti .item:hover .wrapper, ini tidak boleh dilakukan secara langsung.

Walau bagaimanapun, terdapat dua pendekatan yang berdaya maju untuk mencapai kesan ini:

• Hubungan Adik Beradik dan Anak: Jika elemen sasaran (pembungkus) adalah anak atau adik beradik terdekat elemen elemen berlegar (item), anda boleh menggunakan pemilih ~ (adik-beradik) atau (adik-beradik terdekat). Contohnya:

.item:hover + .wrapper {
  background-color: red;
}

• Hubungan Keturunan: Dalam kes di mana elemen sasaran adalah keturunan elemen yang dilegar, anda boleh menggunakan > pemilih (keturunan) dalam peraturan .item:hover. Contohnya:

.item:hover > .child > .wrapper {
  color: black;
}

Ingat, pendekatan ini berkesan apabila elemen yang disasarkan adalah adik-beradik atau keturunan dalam struktur HTML. Untuk elemen yang tidak berkaitan secara langsung dalam DOM, anda mungkin perlu mempertimbangkan penyelesaian alternatif seperti JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Memanipulasi CSS Kelas Berasingan dengan :hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!