Avir94 Avir94 - 1 year ago 54
CSS Question

Jitter in hover transformation CSS

When I use a CSS transformY in a hover property, when the user mouses over the top part of the navigation element, it jitters because the box moved down as it detects a hover and therefore moves out the way of the cursor, which then causes the hover property to be removed, thus the transform gets removed. I would like some help so this jitter doesn't happen, but still accomplished the individual tab move. I am using a combination of bootstrap and my own code to accomplish this.

You can see demo here of what I mean:

https://jsfiddle.net/b5vjw9wk/1/

html:

<nav class="navbar navbar-full navbar-default navbar-bottom navbar-drop-shadow">
<div class="container-fluid">
<div class="row-flex-nav">
<div class="col-flex-3 center active-nav" id="NewHires">
<h4>Active Nav</h4>
</div>
<div class="col-flex-3 center non-active-nav" id="Transfers">
<h4>Non Active</h4>
</div>
<div class="col-flex-3 center non-active-nav" id="Leaving">
<h4>Non Active</h4>
</div>
</div>
</div>
</nav>


CSS:

.navbar {
background-color: rgb(110,14,24);
border: 0px;
}
.navbar-drop-shadow {
-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75);
box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75);
}
.non-active-nav {
color: white;
-webkit-transition: transform .06s; /* Safari */
transition: transform .06s;
}
.non-active-nav:hover {
background: rgb(110,14,24);
-webkit-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75);
box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75);
transform: translateY(10px);
border-radius: 3px;
}
html, body {
background: rgb(75,75,75);
}
.active-nav{
color: white;
background: rgb(75,75,75);
-moz-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75);
box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75);
transform: translateY(10px);
}
.navbar-bottom {
min-height: 25px;
}
.center {
text-align: center;
}

.no-margin{
margin: 0px;
}

.row-flex-nav {
width: 100%;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}

.col-flex-3 {
flex-grow: 1;
width: 33.33%;
}


Any help you can give would be greatly appreciated

Answer Source

One technique I've used before is to add a transparent border and negative margin to the top of the element so that it's impossible to hover off the element as it transitions.

.non-active-nav {
    color: white;
    -webkit-transition: transform .06s; /* Safari */
    transition: transform .06s;

    border-top: 10px solid transparent;
    margin-top: -10px; /* equal to border width */
}

Example:

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.navbar {
	background-color: rgb(110,14,24);
	border: 0px;
}
.navbar-drop-shadow {
	-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75);
	   -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75);
			box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75);
}
.non-active-nav {
	color: white;
	-webkit-transition: transform .06s; /* Safari */
    transition: transform .06s;
    border-top: 10px solid transparent;
    margin-top: -10px;
}
.non-active-nav:hover {
	background: rgb(110,14,24);
	-webkit-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75);
	   -moz-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75);
			box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75);
	transform: translateY(10px);
	border-radius: 3px;
}
html, body {
	background: rgb(75,75,75);
}
.active-nav{
	color: white;
	background: rgb(75,75,75);
	-moz-box-shadow:    inset 0 7px 9px -5px rgba(0,0,0,0.75);
    -webkit-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75);
    box-shadow:         inset 0 7px 9px -5px rgba(0,0,0,0.75);
    transform: translateY(10px);
}
.navbar-bottom {
	min-height: 25px;
}
.center {
	text-align: center;
}

.no-margin{
	margin: 0px;
}

.row-flex-nav {
	width: 100%;
    display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}

.col-flex-3 {
	flex-grow: 1;
	width: 33.33%;
}
<nav class="navbar navbar-full navbar-default navbar-bottom navbar-drop-shadow">
  <div class="container-fluid">
    <div class="row-flex-nav">
      <div class="col-flex-3 center active-nav" id="NewHires">
        <h4>Active Nav</h4>
      </div>
      <div class="col-flex-3 center non-active-nav" id="Transfers">
        <h4>Non Active</h4>
      </div>
      <div class="col-flex-3 center non-active-nav" id="Leaving">
        <h4>Non Active</h4>
      </div>
    </div>
  </div>
</nav>

Updated Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download