从原点悬停时触发 translateY()

translateY() triggered when hovered from point of origin(从原点悬停时触发 translateY())

问题描述

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

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>

这篇关于从原点悬停时触发 translateY()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！