Bagaimanakah Saya Boleh Menghalang Sempadan Hover CSS daripada Mengalihkan Elemen Bersebelahan?

Melaraskan Kedudukan Elemen dengan CSS Hover Borders

Mencipta kesan tuding dengan sempadan CSS kadangkala boleh menyebabkan elemen bersebelahan beralih atau "melompat" sedikit. Isu ini timbul apabila sempadan menambah lebar tambahan pada elemen, menyebabkan perubahan dalam kedudukan berbanding dengan elemen tanpa sempadan yang lain.

Penyelesaian: Sempadan Telus

Untuk menyelesaikan kedudukan ini isu, tambahkan jidar lutsinar kepada keadaan tidak berlegar bagi elemen tersebut. Ini memastikan bahawa semua elemen mempunyai lebar yang sama tanpa mengira status tudingnya, mengelakkan sebarang anjakan yang tidak dijangka.

Contoh: Menu Sauh Menegak

Pertimbangkan menu menegak sauh dalam senarai yang tidak teratur. Coretan CSS berikut menunjukkan isu:

div a:visited, #homeheader a {
    text-decoration: none;
    color: black;
    margin-right: 5px;
}

div a:hover {
    background-color: #D0DDF2;
    border-radius: 5px;
    border: 1px solid #102447;
}

div li {
    padding: 0;
    margin: 0px 10px;
    display: inline;
    font-size: 1em;
}

Melayang di atas mana-mana sauh akan menyebabkan semua sauh ke kiri bergerak sedikit ke kanan disebabkan jidar yang ditambah.

Untuk membetulkannya, sempadan lutsinar boleh ditambah pada keadaan tidak berlegar:

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

Pengubahsuaian ini memastikan semua sauh mempunyai konsistensi lebar, menghapuskan kesan "melompat" dan mengekalkan kedudukan elemen yang betul.

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