如何防止悬停效果移动绝对定位的元素？

CSS 悬停边框调整：确保绝对定位

将悬停效果应用于有边框的元素时，由于以下原因而遇到轻微的重新定位的情况并不罕见增加的宽度。这可能会令人沮丧，特别是对于需要精确对齐的元素。

问题：

考虑一个带有添加边框的悬停效果的锚点无序列表。将鼠标悬停在某个锚点上时，其他锚点会稍微向左移动，扰乱整体布局。

解决方案：

要保持绝对定位，请添加透明边框元素的非悬停状态。这用作占位符，防止悬停时出现实际边框时出现意外跳跃。

CSS:

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

此修改为锚点添加了透明边框在初始状态。应用悬停状态时，会出现实际的实心边框，而不会导致任何重新定位。

演示：

访问以下更新的 JS Fiddle 演示以查看实际解决方案:

http://jsfiddle.net/TEUhM/3/

以上是如何防止悬停效果移动绝对定位的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！