html - 为什么悬停颜色不填充

Question

我想要一个按钮，当我们将鼠标悬停在该按钮上时，填充白色并且里面的文本变为蓝色

这是该按钮的 HTML CSS

 .working-btn-white button {
  height:60px;
  width:155px;
  font-weight: bold;
  background: transparent;
  border-radius:30px;
  border:2px solid #fff;
  color:#fff;
  outline:none;
  position: relative;
  margin: 25px;
  overflow: hidden;
 }
 .working-btn-white button span {
  display: inline-block;
  height:100%;
  width:100%;
  line-height: 60px;
 }
 .working-btn-white button span:hover{
    color: #337ab7;
    font-weight: bold;

 }
 .working-btn-white button span::after {
  position: absolute;
  content:"";
  top:0;
  left:-100%;
  width:100%;
  height: 100%;
  background: #fff;
  transition:left 0.25s ease;
  z-index:-1
 }
 .working-btn-white button span:hover::after {
  left:0%;
  color:white;
 }


my html   

<div class="working-btn-white">
                <button><span>Get a Quote</span></button>
                <button><span>View our Work</span></button>
               </div>

但它不会在背景中填充白色，您可以在此处查看类似效果 https://codepen.io/anon/pen/BXoJbX但我需要白色而不是这种渐变填充

Answer 1

它不起作用，因为你的 z-index 属性在它上面不起作用，因为它是 position:absolute 所以你需要给你的父潜水作为不透明度小于一个(比方说.99)然后我认为它适用于你。您可以使用此链接进一步了解 https://philipwalton.com/articles/what-no-one-told-you-about-z-index/