Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menghalang Kesan Hover daripada Mengalihkan Elemen yang Diposisikan Benar?

Bagaimanakah Saya Boleh Menghalang Kesan Hover daripada Mengalihkan Elemen yang Diposisikan Benar?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-19 16:07:09877semak imbas

How Can I Prevent Hover Effects from Shifting Absolutely Positioned Elements?

Pelarasan Sempadan Tuding CSS: Memastikan Penentududukan Mutlak

Apabila menggunakan kesan tuding pada elemen dengan sempadan, ia adalah perkara biasa untuk menghadapi sedikit perubahan kedudukan disebabkan oleh lebar yang ditambah. Ini boleh mengecewakan, terutamanya untuk elemen yang memerlukan penjajaran yang tepat.

Masalah:

Pertimbangkan senarai penambat yang tidak tertib dengan kesan tuding yang menambah sempadan. Apabila melayang di atas sauh, sauh yang lain beralih sedikit ke kiri, mengganggu reka letak keseluruhan.

Penyelesaian:

Untuk mengekalkan kedudukan mutlak, tambahkan sempadan lutsinar pada keadaan unsur tidak berlegar. Ini berfungsi sebagai pemegang tempat, menghalang kegelisahan yang tidak dijangka apabila sempadan sebenar muncul pada tuding.

CSS:

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}

Pengubahsuaian ini menambahkan jidar lutsinar pada sauh dalam keadaan awal. Apabila keadaan tuding digunakan, sempadan pepejal sebenar muncul tanpa menyebabkan sebarang penempatan semula.

Demo:

Lawati demo JS Fiddle yang dikemas kini berikut untuk melihat penyelesaian dalam tindakan :

http://jsfiddle.net/TEUhM/3/

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Kesan Hover daripada Mengalihkan Elemen yang Diposisikan Benar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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