css - 从原点悬停时触发 translateY()

Question

是否可以在按钮底部移动光标时无限期不触发动画？

这是它的样子 -- gif和 codepen

.container {
  padding: 1rem;
}

.container .here {
  text-decoration: none;
  color: white;
  background: darkgreen;
  display: inline-block;
  margin: 2rem;
  padding: 1rem;
  transition: all .1s;
}

.container .here:hover {
  transform: translateY(-1.5rem) scale(1.5);
}

<div class="container">
  <div class="here">hover here</div>
</div>

Answer 1

通过添加伪元素使底部的按钮变大，您将避免闪烁:

.container {
  padding: 1rem;
}

.container .here {
  text-decoration: none;
  color: white;
  background: darkgreen;
  display: inline-block;
  margin: 2rem;
  padding: 1rem;
  transition: all .1s;
  position:relative;
}
.container .here:before {
  content:"";
  position:absolute;
  top:100%;
  left:0;
  right:0;
}

.container .here:hover {
  transform: translateY(-1.5rem) scale(1.5);
}
.container .here:hover:before {
  height:1.5rem;
}

<div class="container">
  <div class="here">hover here</div>
</div>