How to Prevent Element Shifting on Hover with a Border?

Hovering Border Causing Slight Element Adjustment

Problem:

An unordered list of anchors with a hover event adds a border, but the anchors to the left shift slightly when hovered due to an increase in width. How can you ensure absolute positioning?

Solution:

Adding a transparent border to the non-hover state can prevent the "jumpiness" when the hover border appears.

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

Explanation:

The transparent border allows the width of the anchor to remain consistent, so there's no shift in positioning when the hover border appears. Here's a JSFiddle demo:

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

The above is the detailed content of How to Prevent Element Shifting on Hover with a Border?. For more information, please follow other related articles on the PHP Chinese website!