使用 :after 元素对按钮的悬停效果 - 当鼠标超出按钮尺寸时动画出来

Posted 2023-03-06

【中文标题】使用 :after 元素对按钮的悬停效果 - 当鼠标超出按钮尺寸时动画出来

【英文标题】：Hover effect on button using :after element - Animate out when mouse is out of button dimensions

【发布时间】：2019-05-18 23:23:36

【问题描述】：

我定义了这个按钮动画：JSFIDDLE

代码也包含在这里：

html

<button>Hover to change color</button>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

@keyframes mymove 
    0% width: 0%
    100%  width: 80%


body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;

button 
  margin: auto;
  background-color: $blue;
  border: 1px solid $blue;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  position: relative;
   &:hover 
    &:after 
      content: "";
      position: absolute;
      bottom: 3px;
      width: 80%;
      height: 2px;
      background-color: white;
      left: 0;
      right: 0;
      margin: auto;
      animation-name: mymove;
      animation-duration: .5s;
     
  

这是一个简单的悬停动画。问题是当鼠标离开按钮时， :after 元素就消失了。我想在鼠标离开时为 :after 元素设置动画？ - 你会怎么做？

我应该修改关键帧以包含相反的方向吗？ 100% 到 0% ?还是完全不同的东西？

编辑：

与this question 的不同之处在于我需要从按钮访问 after 元素。我试过这个：

@keyframes mymove-out 
    from &:after 
      width: 80%
      
    to  &:after 
      width: 0
    

在按钮上使用它

animation: mymove-out .5s ease;

但这不起作用。如何从关键帧访问 after 元素？

【问题讨论】：

我不认为您可以仅使用 css 动画来实现这一点。您可以通过在动画仍在运行时将鼠标移出来测试它，您会遇到同样的问题。而不是 :after 使按钮位置相对并在其中添加跨度高度 2px 和动画宽度，使用 javascript。

让span绝对定位。

How to reverse an animation on mouse out after hover的可能重复

@Corne 与此不同的是，我需要从父/按钮访问 after 元素。该线程在定义按钮本身的输出动画方面有一点意义。 - 到一半

【参考方案1】：

您可以使用背景颜色和过渡来简化代码：

body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;


button 
  border: 1px solid #0084ff;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  background:
   linear-gradient(#fff,#fff) 50% calc(100% - 3px) no-repeat,
   #0084ff;
  background-size:0% 2px;
  transition:.5s all;
   


button:hover 
  background-size:80% 2px;

<button>Hover to change color</button>

【讨论】：

我尝试制作的按钮实际上是使用不透明背景，这种方法可以吗？

修改了这一行：background: linear-gradient(#000,#000) 50% calc(100% - 3px) no-repeat, rgba(0,0,0,0); - 它有效

@JonasPraem 你也可以在渐变内为线条修改颜色