CSS Link Element Jumps on Hover

css link element jumps on hover

You 'jump' is caused by the 1px height of the border, that make your li move

You might use

 .navigation li:hover {
   border-color: #ccc;
 }

 .navigation li {
   border: 1px solid #<parentBackgroundColor/transparent>;
 }

instead. This way, the border is here from the beginning, so no jump on hovering, and it's invisible, since it's the same color of the parent container or transparent.

Stop A Button That Jumps On Hover

Well, when you hover, you're adding 10px of padding on the top and bottom that aren't there in the standard style. Try removing these elements from hover

padding-top:10px; padding-bottom:10px;

That, or you'll want to add this padding to your other style.

Menu jumps on hover

You can see working example here:
jsfiddle.net/n5f2b4qk/

You have "Jumps" because of the border-bottom: .3rem solid #ff5f06;

There are 2 approaches to avoid it.

1. set border in :after element (as in example)

   .navbar-nav > li > a {
   font-size: 1.4rem;
   color: #504843;
   text-transform: uppercase;
   letter-spacing: .1rem;
   font-weight: 700;
   margin-right: 2rem;
   position: relative;
   }

   .navbar-nav > li > a:hover,
   .navbar-nav > li > a:focus {
   background: none;
   font-size: 1.4rem;
   color: #262423;
   letter-spacing: .1rem;
   }

   .navbar-nav > li > a:hover:after,
   .navbar-nav > li > a:focus:after {
   content: "";
   position: absolute;
   display: block;
   left: 0;
   right: 0;
   bottom: 0;
   height: .3rem;
   background: #ff5f06;
   }

2. Other option is to set transparent border for a element and change color with hover.

Links jumping on hover

go to line 237 and change this:

.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;

}

to this

.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 0em;
padding-left: 0em;

}

Creating a CSS hover style that doesn't jump

The jumping issue is because you add padding on hover which isn't there before.

Before your media queries define the padding ones:

.menu li {
    border-bottom: 0;
    border-top: 0;
    padding: 1em;
}

Then remove the defined paddings for .menu li in your min 768px query.,

code pen

Hover animation jumps while hovering out

This happens because the transform-origin: bottom; is only applied when the item is hovered. When not hovered it falls back to the default - center. Move the rule to the declaration of the ::after.

.item {

  width: 20%;

  height: 0;

  padding-top: 20%;

  background-color: blue;

  position: relative;

  transition: 800ms;

}

.item::after {

  position: absolute;

  bottom: 0;

  height: 30%;

  width: 100%;

  content: "";

  background-color: grey;

  transition: transform 800ms ease-in-out;

  transform-origin: bottom;

}

.item:hover::after {

  transform: scaleY(2);  

}

<div class="item"></div>

---

Related Topics