Bolehkah CSS Mempengaruhi Kelegapan Satu Elemen Apabila Melayang Pada Elemen Berbeza?

Bolehkah Elemen Mempengaruhi Satu Sama Lain Apabila Melayang di atas Elemen Berbeza?

Masalah:

matlamatnya adalah untuk mengubah suai kelegapan satu elemen (#thisElement) dengan melayang di atas yang lain (img) tanpa menggunakan JavaScript.

Fungsi yang Diingini:

Apabila menuding di atas 'img', kelegapan 'img' harus meningkat kepada 100%, manakala kelegapan daripada '#thisElement' sepatutnya berkurangan kepada 30%.

CSS Pengehadan:

Malangnya, CSS sahaja tidak dapat mencapai kesan ini kerana ia tidak mempunyai keupayaan untuk menggunakan gaya pada elemen berdasarkan lereng elemen berbeza.

Pilihan untuk Mempengaruhi Elemen Jiran:

Walau bagaimanapun, CSS boleh mengubah gaya elemen yang berkaitan dengan elemen berlegar:

• Keturunan: Gunakan gaya pada anak atau elemen bersarang. Contoh:

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

  Salin selepas log masuk

• Adik Beradik Bersebelahan: Kesan elemen serta-merta mengikuti atau mendahului elemen yang dilegar. Contoh:

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

  Salin selepas log masuk

Cadangan Penyelesaian:

Berdasarkan struktur HTML yang diberikan, di mana 'img' mempunyai adik beradik betul-betul di bawahnya tanpa bersarang , anda boleh menggunakan pemilih adik beradik bersebelahan:

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

Peraturan CSS ini akan melaraskan kelegapan daripada elemen 'img' bersebelahan dengan elemen 'img' yang dilegar.

Atas ialah kandungan terperinci Bolehkah CSS Mempengaruhi Kelegapan Satu Elemen Apabila Melayang Pada Elemen Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!