如何防止懸停效果移動絕對定位的元素？

CSS 懸停邊框調整：確保絕對定位

將懸停效果應用於有邊框的元素時，由於以下原因而遇到輕微的重新定位的情況並不罕見增加的寬度。這可能會令人沮喪，特別是對於需要精確對齊的元素。

問題：

考慮一個帶有添加邊框的懸停效果的錨點無序列表。將滑鼠懸停在某個錨點上時，其他錨點會稍微向左移動，擾亂整體佈局。

解決方案：

要保持絕對定位，請加入透明邊框元素的非懸停狀態。這用作佔位符，防止當懸停時出現實際邊框時出現意外跳躍。

CSS:

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

此修改為錨點添加了透明邊框在初始狀態。應用懸停狀態時，會出現實際的實心邊框，而不會導致任何重新定位。

示範：

訪問以下更新的JS Fiddle 演示以查看實際解決方案:

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

以上是如何防止懸停效果移動絕對定位的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！