YogeshChauhan . com

How to avoid element shift on border change while hovering in CSS?

in CSS on February 7, 2021

I am talking about this kind of element shift while hovering on element.

element shift on hover

That happens when we try to inject border on hover. For e.g. in the code below, I have right border but not the left one and on hover, I am adding the left border which creates element push to make a room for that border.

This should be avoided as it will push all elements which are in relative position to the element we are injecting the border.

There are few different ways we can avoid this kind of situation.

Here is one way to avoid it.

Just add the transparent border-left initially and add the color of the border using border-left-color property. That way it won’t require element shift on hover as the room is already allocated.

At the end we will see NO shift on hover. Like this:

No element shift on hover
amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to Access a Global Variable From Inside a Function in PHP?PHPthe box-sizing property in CSSCSSHow to make a web page look good on any device?HTMLRevisiting variable scope in JavaScriptJavaScriptHow to refresh a page using PHP at regularly occurring intervals?PHPHow to apply style to a specific child element using CSS?CSSNATURAL JOIN in PostgresPostgresHow to change CSS with JavaScript?CSSPHP Login System using PDO Part 1: Create User Registration PagePHPDid you get an error while displaying Special Characters in JavaScript?JavaScriptWhat is iFrame in HTML? Why do we need it?HTMLLIMIT and OFFSET in PostgresPostgres