Bagaimanakah Saya Boleh Mengubah Suai Gaya Elemen pada Hover Menggunakan CSS?

Melaksanakan Pengubahsuaian Elemen Tidak Langsung pada Hover

Dalam pembangunan web, adalah penting untuk memanipulasi pelbagai elemen berdasarkan interaksi pengguna. Senario biasa ialah mencetuskan perubahan dalam satu elemen apabila elemen lain dituding ke atas.

Pertimbangkan contoh yang disediakan dalam demo JSFiddle. Apabila elemen #kubus dituding di atas, warna latar belakangnya bertukar kepada biru. Walau bagaimanapun, katakan kita ingin mencapai kesan ini apabila elemen #bekas dilegarkan sebaliknya. Bagaimanakah kita boleh mencapai pengubahsuaian tidak langsung ini?

Menggunakan kelas pseudo CSS :hover, kita boleh menentukan bahawa perubahan harus berlaku kepada elemen lain apabila elemen tertentu dilegarkan. Mari terokai pilihan yang tersedia:

Kiub Terus Di Dalam Bekas:

Jika elemen #kubus bersarang terus dalam elemen #bekas, kita boleh menggunakan pemilih CSS berikut :

#container:hover > #cube { background-color: yellow; }

Pemilih ini menyasarkan elemen #kubus hanya apabila ia merupakan anak langsung daripada elemen #container dan elemen #container dilegarkan di atas.

Kiub Bersebelahan dengan Bekas:

Jika elemen #kiub diletakkan sejurus selepas elemen #container (sebelah kepadanya), kita boleh menggunakan pemilih ini:

#container:hover + #cube { background-color: yellow; }

Pemilih ini menyasarkan elemen #kubus serta-merta mengikuti elemen #bekas apabila elemen #bekas dilegarkan di atas.

Kiub Di Dalam Elemen Bersarang dalam Bekas:

Apabila elemen #kiub bersarang di dalam yang lain elemen di dalam elemen #container, kita boleh menggunakan pemilih ini:

#container:hover #cube { background-color: yellow; }

Pemilih ini menyasarkan semua Unsur #kiub yang merupakan keturunan unsur #bekas apabila elemen #bekas dilegarkan di atas.

Kiub Bersaudara kepada Bekas:

Jika elemen #kiub berada di tahap hierarki yang sama seperti elemen #bekas, kita boleh menggunakan pemilih ini:

#container:hover ~ #cube { background-color: yellow; }

Ini pemilih menyasarkan elemen #kubus yang merupakan adik kepada elemen #bekas (iaitu, mereka berkongsi elemen induk yang sama) apabila elemen #bekas dilegarkan.

Dengan memanfaatkan pemilih CSS ini, anda boleh mengubah suai dengan mudah sifat elemen lain apabila elemen tertentu dilegarkan, mewujudkan pengalaman web yang interaktif dan menarik secara visual.

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