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>
<p><strong> Adik Beradik Bersebelahan</strong></p>
<p>Menyasarkan adik beradik bersebelahan memerlukan sedikit perbezaan pendekatan:</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

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

<div>
<p><strong>Pelaksanaan dalam Kes Anda</strong></p>
<p>Menimbang sampel anda, anda mungkin menyasarkan sesuatu yang serupa dengan:</p>
<pre class="brush:php;toolbar:false">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.