Bolehkah CSS Mempengaruhi Gaya Elemen Adik Beradik Berdasarkan Keadaan Hover Elemen Lain?

Interaksi Adik Beradik dengan CSS Hover

Dalam reka bentuk web, anda boleh menghadapi senario di mana anda ingin mengubah suai penampilan adik-beradik elemen berdasarkan keadaan legarnya. Walau bagaimanapun, terdapat pengehadan untuk fungsi ini dalam CSS.

Menukar Warna Adik Beradik pada Tuding

Jika anda mempunyai elemen bersebelahan dan ingin menukar warna adik beradik berikut apabila elemen pertama (biasanya diletakkan di hadapan adik beradik) dilegarkan, ia mungkin menggunakan CSS. Sebagai contoh, anda boleh mengubah warna pautan "a" apabila tajuk "h1" di atasnya dilegar.

h1 + a {
  color: #a04f4f;
}
h1:hover + a {
  color: #4f4fd0;
}

Penghadan

Walau bagaimanapun, anda tidak boleh menjejaskan warna adik beradik terdahulu dengan cara yang sama. Jika anda mempunyai tajuk "h1" diikuti dengan pautan "a" dan ingin menukar warna tajuk apabila anda menuding pada pautan, itu tidak boleh dicapai dengan CSS.

a:hover + h1 {
  background-color: #444;  // This won't work
}

Interaksi Adik Beradik CSS Contoh

Berikut ialah contoh yang menggambarkan interaksi CSS yang mungkin dan mustahil dalam ini konteks:

<h1>Heading</h1>
<a class="button" href="#">The "Button"</a>
<h1>Another Heading</h1>

h1 {
  color: #4fa04f;
}
h1:hover + a {
  color: #4f4fd0;
}
a:hover + h1 {
  background-color: #444;  // This won't work
}

Atas ialah kandungan terperinci Bolehkah CSS Mempengaruhi Gaya Elemen Adik Beradik Berdasarkan Keadaan Hover Elemen Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!