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

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
Revisiting variable scope in JavaScriptJavaScriptHow to animate list items using CSS and JavaScript?CSSThe 7 Security Objectives of Any Organization for IT and Network SecurityMiscellaneousHow to change the Login Logo in WordPress?WordPressWhat are keys in React?ReactHow to create a Star Ratings using CSS?CSSHow to get the full URL of current page in PHP?PHPOOP, Class and Objects Strategies For Beginners (PHP)PHPHow to convert a function component into a class in React?ReactHow to remove trailing characters from a string using JavaScript?JavaScriptContent types in DrupalDrupalKubernetes vs. Docker? It’s a misleading phraseMiscellaneous