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
dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

Global JavaScript methods to convert variables to numbersJavaScriptSolution for Xcode 11 Command PhaseScriptExecution failed with a nonzero exit code errorMiscHow to scroll contents of HTML body horizontally and vertically using JavaScript?JavaScriptHow to create a simple drop down menu using JavaScript and CSS?CSSHow to create a secure random number using JavaScript?JavaScriptHow to create a CSS full page background image?CSSShort-Circuit Evaluation in JavaScriptJavaScriptHow to force your website to load securely with an .htaccess file?MiscUnary Operators in JavaScriptJavaScriptOOP, Class and Objects Strategies For Beginners (PHP)PHPHow to create a Random Hex Color generator using JavaScript?JavaScriptSimple Page Hit Counter in PHPPHP