从原点悬停时触发 translateY()

【问题标题】：translateY() triggered when hovered from point of origin从原点悬停时触发 translateY()
【发布时间】：2018-11-29 17:04:33
【问题描述】：

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

这是它的样子 -- 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>

【问题讨论】：

尝试将position: absolute;添加到.here

标签： css hover

【解决方案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>

【讨论】：