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

Cara Menukar Warna Elemen Adik Beradik pada Tuding dalam CSS

Dalam HTML, adik beradik ialah elemen yang berkongsi unsur induk yang sama. Apabila menuding pada elemen tertentu, selalunya wajar untuk menukar rupa elemen adik beradik mereka.

Menukar Warna Elemen Adik Beradik yang Mengikuti

Untuk menukar warna a elemen adik beradik yang mengikuti elemen berlegar, gunakan pemilih adik beradik bersebelahan ( ) dalam CSS. Contohnya, untuk menukar warna elemen apabila

elemen dilegarkan:

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

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

Batasan: Menukar Warna Elemen Adik Beradik Terdahulu

CSS tidak menyediakan cara langsung untuk menukar gaya adik beradik terdahulu elemen berdasarkan keadaan tuding adik beradiknya.

Menggunakan Pembungkus Div

Membungkus elemen dalam div dengan ID membolehkan anda menukar warna adik beradik sebelumnya menggunakan pemilih CSS yang lebih kompleks.

<div>

#banner h1 {
  color: #4fa04f;
}

#banner a {
  color: #a04f4f;
}

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

#banner:hover a {
  color: #a04f4f;
}

Pendekatan ini membenarkan untuk kawalan yang lebih baik ke atas penggayaan elemen adik-beradik, tetapi ia memperkenalkan penanda tambahan dan boleh menjadi kurang cekap.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Elemen HTML Adik Beradik pada Hover Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!