从原点悬停时触发 translateY()

2022-01-22 00:00:00 hover css

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

is it possible not to trigger the animation indefinitely when you move the cursor at the bottom of the button?

这是它的样子 -- gif 和 codepen

here's how it looks like -- gif and 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>

推荐答案

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

Make the button bigger at the bottom by adding a pseudo element and you will avoid the flicker:

.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>

相关文章