更改背景顏色時，懸停效果不起作用。 默認顏色是透明的

Question

<button class="button-main slide">Slide Left</button>

.button-main{
  color: black; 
  outline: none;
  background: transparent;
  border: none;
  letter-spacing: 0.0625em;
  padding: 8px 10px; 
  text-transform: uppercase;
  font: bold 16px 'Bitter', sans- serif; 
  line-height: 2;
  position: relative;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  text-decoration: none; 
  overflow: hidden;
  transition: all .5s;
}

.button-main :before,
.button-main :after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: #259f6c; 
  z-index: -1;
  transform: translate3D(0,-100%,0); 
  transition: all .5s;
}

.button-main :before {
  background: #fafcd6; 
  z-index: -2;
  transform: translate3D(0,0,0);
}

.button-main :hover {
    color: white;
}

.button-main :hover: after {
  transform: translate3D(0,0,0);
  transition: all .5s;
}

.slide :after {
  top: 0;
  z-index: -1;
  transform: translate3D(-101%,0,0);
}

.slide :hover :after {
  transform: translate3D(0,0,0);
  transition: all .5s;
}

當按鈕的背景顏色更改為非透明顏色時，按鈕上的懸停滑動效果不起作用。 button-main 中按鈕的默認顏色是透明的。 需要改什么，例如當我把按鈕背景改為紅色時，滑動懸停效果會起作用？

Answer 1

我已經用 before 替換了所有 after 元素，因為我們需要它顯示在元素之前而不是之后。 而且我還刪除了之前的元素。

 <button class="button-main slide">Slide Left</button> <style type="text/css"> .button-main{ color: black; outline: none; background: red; transform: translate3D(0,0,0); border: none; border-bottom: 4px solid #eee; letter-spacing: 0.0625em; padding: 8px 10px; text-transform: uppercase; font: bold 16px 'Bitter', sans- serif; line-height: 2; position: relative; display: inline-block; margin-right: 20px; margin-bottom: 20px; cursor: pointer; text-decoration: none; overflow: hidden; transition: all .5s; } .button-main:before{ content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: 100%; background: #259f6c; z-index: -1; transform: translate3D(0,-100%,0); transition: all .5s; } .button-main:hover{ color: white; } .button-main:hover:before{ transform: translate3D(0,0,0); transition: all .5s; } /* //// Slide Left //// */ .slide:before{ top: 0; z-index: -1; transform: translate3D(-101%,0,0); } </style>