Yogesh Chauhan's Blog

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

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to make a curtain slider using jQuery and CSS?CSSArbitrary Arguments in SCSS functionsSCSSHow to add multiple Columns in CSS like Bootstrap?CSSFull and Partial ROLLUP in Postgresql with ExamplesPostgresGlobal JavaScript methods to convert variables to numbersJavaScriptHow to Remove PHP File Extensions From Your Website URLs?PHPHow to detect if browser supports WebP format on server side PHP script?PHPPHP __construct() functionPHPSome Useful Operators in The SQL WHERE ClauseSQL/MySQL2 Ways we can create an Array in JavaScriptJavaScriptHow to create a flip effect with CSS?CSSA few HTML coding standards from WordPressHTML