Bagaimanakah Saya Boleh Menukar Warna Elemen Adik Beradik pada Hover Menggunakan CSS?

Cara Menukar Warna Elemen Adik Beradik pada Hover dengan CSS

Dalam HTML, adalah perkara biasa untuk mempunyai elemen adik beradik, bermakna mereka berkongsi unsur induk yang sama. Apabila anda menuding pada elemen tertentu, anda mungkin mahu mengubah suai penampilan elemen adik-beradiknya. Walau bagaimanapun, CSS mempunyai had dalam hal menggayakan adik-beradik terdahulu.

Penyelesaian:

CSS membolehkan anda menyasarkan elemen adik-beradik yang mengikuti elemen berlegar. Contohnya:

h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}

Kod ini menetapkan warna

menuju ke hijau dan pautan ke merah.

Untuk menukar warna pautan apabila melayang di atas

tajuk, tambahkan :hover pseudo-class:

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

Nota:

Menukar warna adik-beradik terdahulu tidak boleh dilakukan dengan CSS. Jika anda ingin menggayakan adik beradik terdahulu, pertimbangkan untuk menggunakan JavaScript atau rangka kerja CSS yang menyediakan fungsi tambahan.

Contoh dengan Elemen Pembungkus:

Membungkus elemen dalam bekas (

) dengan ID tidak akan mengubah peraturan CSS. Anda masih akan mengikut prinsip yang sama seperti yang diterangkan di atas:

<div><pre class="brush:php;toolbar:false">#banner h1 {
    color: #4fa04f;
}
#banner h1 + a {
    color: #a04f4f;
}
#banner h1:hover + a {
    color: #4f4fd0;
}