Bagaimana untuk Menukar Warna Elemen Adik Beradik pada Hover dengan CSS?

Cara Menukar Warna Adik Beradik secara Selektif dengan CSS Hover

Apabila menuding pada elemen, terdapat teknik CSS tertentu yang boleh digunakan untuk mengubah rupa unsur-unsur jirannya.

Menyasarkan Seterusnya Adik beradik

Menggunakan tanda " " dalam pemilih CSS anda membolehkan anda menyasarkan elemen serta-merta mengikut elemen yang anda tuding. Sebagai contoh, kod berikut menukar warna elemen "a" apabila elemen "h1" sebelumnya dilegar:

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

Menyasarkan Adik Beradik Terdahulu

Walau bagaimanapun , CSS mempunyai had dalam menyasarkan adik-beradik terdahulu. Untuk mencapai kesan yang serupa, anda perlu membungkus elemen dalam bekas induk dan menggunakan pemilih adik beradik umum "~" untuk menyasarkan elemen yang diingini. Walau bagaimanapun, kaedah ini mungkin tidak selalu menghasilkan hasil yang diingini.

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

Contoh Senario

Pertimbangkan penanda HTML berikut:

<h1>

Untuk menukar warna elemen "a" apabila "h1" dengan id "tajuk" dilegar, anda boleh menggunakan yang berikut CSS:

#title:hover + .button { color: #4f4fd0; }

Atas ialah kandungan terperinci Bagaimana untuk Menukar Warna Elemen Adik Beradik pada Hover dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!