Bagaimana untuk Mencegah Pergeseran Elemen Apabila Menambah Sempadan CSS Dicetuskan Hover?

Elakkan Pergeseran Elemen dengan Sempadan CSS yang dicetuskan Tuding

Anda sedang menambahkan sorotan latar belakang pada baris pada tuding, tetapi perhatikan yang tidak diingini pergerakan yang disebabkan oleh sempadan 1px tambahan. Tanpa menggunakan imej latar belakang, bagaimanakah anda mengimbangi anjakan ini?

Penyelesaian:

Untuk mengelakkan elemen daripada bergerak, anda boleh menjadikan sempadan telus. Dengan cara ini, sempadan kekal ada tetapi tidak kelihatan, menghapuskan sebarang kemungkinan tolakan terhadap elemen.

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

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

Pengubahsuaian ini memastikan kesan leding mengekalkan gelagat yang dimaksudkan tanpa mengganggu kedudukan elemen.

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