Why Do Adjacent Elements Shift When Hovering Over CSS Borders?

Hover Border Anomaly in CSS

When applying hover events to elements with borders, a common issue arises where elements adjacent to the hovered element shift position. This is because the border adds to the element's width, causing the containing block to adjust its layout.

In this scenario, an unordered list of anchors adorned with :hover borders demonstrates this problem. Upon hover, the anchors to the left subtly shift due to the added 1px border.

Solution: Maintaining Element Positioning During Hover

To prevent this positioning anomaly, you can employ the following technique:

Add a transparent border to the non-hover state of the element. This ensures that the space reserved for the border is already accounted for, preventing the layout from adjusting when the hover border appears.

Code Example:

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

By incorporating this transparent border, you effectively eliminate the "jumpiness" caused by the appearance of the hover border, ensuring stable positioning of the surrounding elements.

The above is the detailed content of Why Do Adjacent Elements Shift When Hovering Over CSS Borders?. For more information, please follow other related articles on the PHP Chinese website!