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

Memanipulasi Warna Elemen Adik Beradik pada Tuding dengan CSS

Salah satu cara untuk mengubah suai rupa elemen HTML adalah melalui CSS. Dalam artikel ini, kami akan meneroka permintaan khusus: menukar warna elemen adik beradik apabila menuding di atasnya.

Pernyataan Masalah Asal

Memandangkan kod HTML berikut:

<h1>Heading</h1>
<a class="button" href="#">-</a>

Matlamat kami adalah untuk menukar warna

elemen apabila kita menuding pada elemen menggunakan CSS sahaja.

Interaksi Elemen Adik Beradik

Malangnya, pemilih adik beradik CSS tidak boleh menjejaskan elemen mendahuluinya. Dalam contoh di atas,

elemen datang sebelum elemen, menjadikannya mustahil untuk menukar warnanya secara langsung menggunakan pemilih (dengan serta-merta mengikuti adik beradik).

Penyelesaian Berasaskan Bekas

Satu penyelesaian adalah dengan memperkenalkan div bekas induk dengan id:

<div>

Walau bagaimanapun, ini tidak memberikan hubungan langsung antara elemen dan

elemen.

Pendekatan Alternatif

Untuk mengatasi pengehadan ini, pertimbangkan untuk menggunakan CSS untuk menyasarkan "adik-beradik seterusnya" (elemen yang datang selepas elemen tertentu). Contoh di bawah menunjukkan cara untuk mencapai ini:

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

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

Ini mengemas kini warna elemen ke #a04f4f dalam keadaan lalainya dan ke #4f4fd0 apabila kami menuding di atas

elemen.

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