按钮悬停效果不起作用答案

【问题标题】：Button Hover Effect Not Work按钮悬停效果不起作用
【发布时间】：2018-04-17 17:17:15
【问题描述】：

你好首先我很抱歉我的英语。我想将此效果添加到站点但无法正常工作。效果名称从左滑动但内容：“”；不起作用帮助效果

  <div class="button-wrapper">
<div class="button slideleft"><span>Slide from left</span></div>

.button.slideleft:after {
  content: "";
  backface-visibility: hidden;
  background-color: #333;
  border-radius: 50%;
  height: 70px;
  right: 100%;
  position: absolute;
  top: 50%;
  transform-origin: 0% 50%;
  transform: scale3d(1, 5, 1);
  -webkit-transition: -webkit-transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: -webkit-transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 70px;
  z-index: -1;
}
.button.slideleft:hover span {
  color: white;
}
.button.slideleft:hover:after {
  -webkit-transform: scale3d(5, 3.5, 1);
          transform: scale3d(5, 3.5, 1);
}

this effect

链接

【问题讨论】：

您需要提供更多代码。您的问题很可能是您的 CSS 未正确链接到您的 HTML。
也分享你的css
请创建一个minimal reproducible example。 codepen 链接运行良好。
无法判断为什么它不起作用，您必须提供 CSS 代码。这将是您的 CSS 错误而不是 HTML

标签： css button effect codepen

【解决方案1】：

您的<div class="button slideleft"> 的样式为position: absolute;，您错过了为其父元素样式position: relative 指定的样式。尝试将其添加到您的 CSS：

.button-wrapper {
    position: relative;
    overflow: hidden;
}

【讨论】：