How to Add CSS Borders on Hover Without Element Shifting?

Adding CSS Borders on Hover Without Element Movement

When applying a highlighted background to an element on hover effects, adding a CSS border can lead to an unexpected result. The additional 1px border widens the element, causing it to shift its position. How can we handle this without resorting to a background image approach?

The solution lies in creating a transparent border on the element to start with:

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

This way, the border exists but remains invisible, preventing any movement from occurring. When hover effects are applied:

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

The highlighted background is applied along with the colored border, but the border doesn't alter the element's dimensions since it's already transparent. As a result, the element's position remains consistent on hover.

The above is the detailed content of How to Add CSS Borders on Hover Without Element Shifting?. For more information, please follow other related articles on the PHP Chinese website!