如何防止 CSS 悬停边框移动相邻元素？

使用 CSS 悬停边框调整元素位置

使用 CSS 边框创建悬停效果有时会导致相邻元素轻微移动或“跳跃”。当边框向元素添加额外宽度，导致相对于其他无边框元素的定位发生变化时，就会出现此问题。

解决方案：透明边框

解决此定位问题问题，为元素的非悬停状态添加透明边框。这可以确保所有元素具有相同的宽度，无论其悬停状态如何，从而防止任何意外的移动。

示例：垂直锚点菜单

考虑锚点的垂直菜单无序列表。以下 CSS 代码段演示了该问题：

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;
}

将鼠标悬停在任何锚点上都会导致左侧的所有锚点由于添加的边框而稍微向右移动。

要纠正此问题，非悬停状态可以添加透明边框：

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

此修改保证所有锚点具有一致的宽度，消除了“跳跃”效果并保持正确的元素定位。

以上是如何防止 CSS 悬停边框移动相邻元素？的详细内容。更多信息请关注PHP中文网其他相关文章！