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 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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
CSS Overflow Property with ExamplesCSSSimple Page Hit Counter in PHPPHPHow to convert an object from API to JSON array in Angular 9?AngularLearn how to use Self JOIN in SQL and MySQLSQL/MySQLWhat is the difference between float and double?MiscellaneousWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscellaneousHow does @extend rule work in SCSS (Sass)?SCSSHow to create a multisite network in WordPress?WordPressHow to add Date and Time picker in HTML and get the values using JavaScript?HTMLHow to change value of a span tag using a reference from another div using jQuery?jQueryRIGHT JOIN in PostgresPostgresSolution to “NullInjectorError: No provider for module” in Angular 9Angular