How to avoid element shift on border change while hovering in CSS?
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

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

Quick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptSolution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressHow does AdSense calculate page loading time?JavaScriptWhat is PostgreSQL? How similar or different it is from SQL?PostgresCSS Attribute SelectorsCSS4 ways to create Date Objects in JavaScriptJavaScriptKeyValuePipe in Angular 9AngularHow to check if the element exists using JavaScript and jQuery?JavaScriptWhat’s a repository on Github?MiscURL paths in DrupalDrupalWhat are Modules and Components in Angular?AngularWhat Is a Graph Database?Misc