Bolehkah CSS Sendiri Menggayakan Satu Elemen Apabila Melayang Di Atas Yang Lain?

Menuju pada Satu Elemen untuk Menjejaskan Elemen Lain Menggunakan CSS

Soalan:

Mencapai kesan CSS apabila menuding pada satu elemen secara langsung mengubah rupa unsur lain yang berdekatan boleh menjadi rumit. Walaupun terdapat percubaan untuk melaksanakan kesan sedemikian, masih tidak jelas sama ada ia boleh dilakukan semata-mata melalui CSS.

Jawapan:

Keupayaan untuk menjejaskan penampilan elemen apabila melayang di atas elemen berbeza menggunakan CSS adalah terhad. Malah, ia hanya boleh dilakukan jika elemen yang disasarkan adalah sama ada keturunan atau adik beradik bersebelahan unsur pencetus.

Elemen Keturunan:

Jika elemen yang terjejas bersarang dalam elemen pencetus, CSS boleh digunakan untuk memanipulasinya pada tuding:

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

Pemilih ini akan menggunakan kesan kepada elemen dengan struktur berikut:

<div>
<p><strong>Adik Beradik Bersebelahan:</strong></p>
<p>Untuk elemen yang merupakan adik beradik bersebelahan dengan elemen pencetus, pendekatan yang berbeza ialah perlu:</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
  opacity: 0.3;
}

Pemilih ini akan menyasarkan elemen dalam HTML berikut struktur:

<div>
<p><strong>Penghadan:</strong></p>
<p>Dalam kedua-dua kes, adalah penting untuk ambil perhatian bahawa elemen terakhir yang dinyatakan dalam pemilih ialah elemen yang akan terjejas pada tuding .</p>
<p><strong>Contoh:</strong></p>
<p>Untuk senario serupa dengan contoh pseudo-kod yang disediakan, peraturan CSS berikut boleh digunakan:</p>
<pre class="brush:php;toolbar:false">img:hover + img {
  opacity: 0.3;
  color: red;
}

Contoh yang menunjukkan kesan ini boleh didapati dalam JS Fiddle yang disediakan: https://jsfiddle.net/