Bolehkah CSS Mengubah Sifat Elemen semasa Melayang di Atas Elemen Berbeza?

Mempengaruhi Elemen Berbeza pada Tudingan Lain

Adakah mungkin untuk mengubah sifat elemen apabila elemen berasingan dilegarkan di atas? Pertanyaan ini menyelidiki cara untuk mencapai gelagat ini hanya menggunakan CSS.

Walaupun keupayaan sedia ada CSS menghalang penyasaran bukan keturunan atau adik beradik bersebelahan, terdapat senario khusus yang mungkin.

Keturunan

Jika unsur yang terjejas adalah keturunan elemen berlegar, pemilih CSS boleh menyasarkannya dengan berkesan menggunakan:

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

Sebagai contoh, ini menyasarkan "elemen_anak" dalam "elemen_ibu bapa" pada tuding:

<div>

Adik Beradik Bersebelahan

Menyasarkan adik beradik bersebelahan memerlukan sedikit perbezaan pendekatan:

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

Ini memberi kesan kepada "adik_kedua" apabila "adik_pertama" dituding di atas:

<div>

Pelaksanaan dalam Kes Anda

Menimbang sampel anda, anda mungkin menyasarkan sesuatu yang serupa dengan:

img:hover + img {
    opacity: 0.3;
    color: red;
}

Ini menjejaskan imej kedua apabila imej pertama dituding di atas.

Demo

Lawati [demo JS Fiddle ini](masukkan pautan demo di sini) untuk contoh interaktif.

Atas ialah kandungan terperinci Bolehkah CSS Mengubah Sifat Elemen semasa Melayang di Atas Elemen Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!