Bagaimana untuk Menambah Sempadan CSS pada Hover Tanpa Peralihan Unsur?

Menambah Sempadan CSS pada Tuding Tanpa Pergerakan Elemen

Apabila menggunakan latar belakang yang diserlahkan pada elemen pada kesan tuding, menambahkan sempadan CSS boleh membawa kepada keputusan yang tidak dijangka. Sempadan 1px tambahan melebarkan elemen, menyebabkan ia beralih kedudukannya. Bagaimanakah kita boleh mengendalikan perkara ini tanpa menggunakan pendekatan imej latar belakang?

Penyelesaian terletak pada mencipta sempadan lutsinar pada elemen untuk bermula dengan:

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

Dengan cara ini, sempadan wujud tetapi kekal tidak kelihatan, menghalang sebarang pergerakan daripada berlaku. Apabila kesan tuding digunakan:

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

Latar belakang yang diserlahkan digunakan bersama-sama jidar berwarna, tetapi jidar tidak mengubah dimensi elemen kerana ia sudah lutsinar. Akibatnya, kedudukan elemen kekal konsisten pada tuding.

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