How to Prevent Element Shift When Adding Hover-Triggered CSS Borders?

Avoid Element Shift with Hover-triggered CSS Borders

You're adding a background highlight to a row on hover, but notice an unwanted movement caused by the additional 1px border. Without resorting to background images, how do you compensate for this displacement?

Solution:

To prevent the element from moving, you can make the border transparent. This way, the border remains present but invisible, eliminating any potential push against the element.

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

This modification ensures that the hover effect maintains its intended behavior without disrupting the element's position.

The above is the detailed content of How to Prevent Element Shift When Adding Hover-Triggered CSS Borders?. For more information, please follow other related articles on the PHP Chinese website!