悬停变换 CSS 中的抖动

Question

当我在悬停属性中使用 CSS transformY 时，当用户将鼠标悬停在导航元素的顶部时，它会抖动，因为框在检测到悬停时向下移动，因此会移出光标的路径，这然后导致悬停属性被删除，因此变换被删除。我需要一些帮助，这样就不会发生这种抖动，但仍然可以完成单个标签的移动。我正在使用引导程序和我自己的代码的组合来完成此操作。

你可以在这里看到我的意思的演示：

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%;
}

如果您能提供任何帮助，我们将不胜感激

Answer 1

我以前使用过的一种技术是在元素顶部添加透明边框和负边距，这样在元素过渡时就不可能将鼠标悬停在元素上。

.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 */
}

例子：

@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