Bagaimana untuk Mematikan Kesan Hover Elemen Induk Apabila Melayang Di Atas Anaknya dengan CSS Tulen?

Ibu Bapa Tuding Mati Apabila Anak Dilegar: Pendekatan CSS Tulen

Dalam struktur HTML kami, kami mempunyai dua

unsur: .ibu bapa sebagai bekas luar dan .anak sebagai unsur dalam. Secara lalai, apabila kursor tetikus melayang di atas .parent, warna latar belakangnya bertukar kepada biru muda. Walau bagaimanapun, matlamat kami adalah untuk mengembalikan latar belakang .parent kepada warna kelabu asalnya apabila kursor menuding ke atas .child.

Malangnya, pemilih CSS pada masa ini tidak mempunyai fungsi untuk menggayakan elemen induk berdasarkan keadaan anaknya. Untuk memintas pengehadan ini, kami akan menggunakan teknik pintar menggunakan elemen adik beradik tambahan.

Dalam CSS kami, kami mentakrifkan elemen .induk dengan dimensi dan pelapiknya serta latar belakang kelabu. Apabila tetikus melayang di atas .parent, latar belakangnya bertukar menjadi biru muda.

Bahagian penting ialah elemen .kanak-kanak. Kami meletakkannya pada jarak di atas induknya menggunakan jidar negatif (atas: -200px;) dan memberikannya latar belakang kelabu gelap yang beralih kepada hitam semasa tuding.

Akhir sekali, kami memperkenalkan elemen .sibling. Ini ialah elemen pemegang tempat, diletakkan dan bersaiz untuk dipadankan dengan .child tetapi terletak sedikit di sebelah kiri dan di atasnya. Ia juga mempunyai latar belakang berwarna yang beralih kepada putih pada tuding.

Apabila kursor tetikus melayang di atas .child, elemen .child menukar warna latar belakangnya kepada hitam. Pada masa yang sama, ini menyebabkan elemen .sibling bertindih dan menutup bahagian .parent yang sebelum ini dilegarkan. Oleh kerana .sibling adalah lutsinar, latar belakang kelabu asal .parent menjadi kelihatan semula.

Akibatnya, apabila anda menuding pada .child, ia menjadi hitam dan menyembunyikan bahagian .parent yang telah diserlahkan sebelum ini. Ini mewujudkan ilusi bahawa latar belakang .parent telah kembali kepada warna asalnya, walaupun ia sebenarnya masih kelabu di belakang .sibling.

Walaupun terdapat batasan CSS tulen dalam situasi ini, teknik ini memberikan kesan yang elegan dan penyelesaian yang berkesan untuk mematikan kesan tuding pada elemen induk apabila anda menuding pada anaknya.

Atas ialah kandungan terperinci Bagaimana untuk Mematikan Kesan Hover Elemen Induk Apabila Melayang Di Atas Anaknya dengan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html define using finally default this position padding background

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn