Bagaimana untuk Menghalang Elemen Jitter pada Hover Apabila Menambah Sempadan CSS?

Memelihara Penjajaran Elemen dengan Sempadan CSS pada Tuding

Dalam pembangunan web, meningkatkan pengalaman pengguna selalunya melibatkan penambahan maklum balas visual pada keadaan tuding. Walau bagaimanapun, menambahkan sempadan pada elemen pada tuding boleh menyebabkan peralihan visual kecil disebabkan ruang tambahan yang digunakan. Artikel ini meneroka cara untuk mengurangkan isu ini tanpa menggunakan imej latar belakang.

Pertimbangkan kod berikut:

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

Kod ini menetapkan warna latar belakang untuk elemen item pada tuding. Ia juga menambah sempadan pepejal 1px ke bahagian atas elemen. Walau bagaimanapun, sempadan menambah piksel ruang tambahan, menyebabkan elemen "melompat" pada tuding.

Untuk menangani perkara ini, kami boleh menggunakan teknik yang dikenali sebagai "sempadan halimunan". Dengan menjadikan sempadan telus, kami mengekalkan kedudukan elemen sambil masih mencapai kesan yang diingini:

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

Dalam kod ini, kami menetapkan sempadan elemen item kepada 1px pepejal lutsinar. Ini mewujudkan sempadan yang wujud tanpa menambah sebarang ruang yang kelihatan. Apabila elemen dituding ke atas, warna jidar ditukar kepada #d0d0d0, menjadi kelihatan dan mengekalkan penjajaran elemen.

Dengan memanfaatkan teknik ini, kami boleh menambah sempadan CSS pada tuding dengan berkesan tanpa mengubah penjajaran elemen . Ini memastikan pengalaman pengguna yang lancar dan menarik secara visual sambil mengekalkan kesederhanaan kod.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Elemen Jitter pada Hover Apabila Menambah Sempadan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!