为什么悬停颜色不填充答案

【问题标题】：Why on hover color is not filling为什么悬停颜色不填充
【发布时间】：2019-07-30 17:13:05
【问题描述】：

我想要一个按钮，当我们将填充白色的事务悬停在该按钮上时，里面的文本变成蓝色

这是我的那个按钮的 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，但我需要白色而不是渐变填充

【问题讨论】：

好吧@Avinash，悬停时它的背景确实有白色，请参见此处：jsbin.com/xagesexico/edit?html,css,output（与您的代码相同）
jsfiddle.net/9y46v1p3/1 这是你的代码的一个 jsfiddle...我不确定你在说什么，你能澄清一下吗？我还为按钮添加了黑色边框，以便我们可以看到它们
移除背景：透明；并检查，但不确定您想要的最终结果是什么
嗨@Avinash，我在你的代码中添加了背景颜色，所以我们可以看到白色背景的动画
如果您的背景也是白色的，则悬停白色填充事务将不可见...

标签： html css

【解决方案1】：

它不工作，因为你的 z-index 属性不能工作，因为它是 position:absolute 所以你需要给你的父母潜水作为不透明度小于一个（比如说.99）然后我认为它会工作你。您可以使用此链接进一步查看https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

【讨论】：

【解决方案2】：

这是您的解决方案

body{
  background-color: green;
}

.working-btn-white button {
  height:60px;
  width:155px;
  font-weight: bold;
  background: transparent;
  border-radius:30px;
  border:2px solid #fff;
  border-color: black;
  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: blue;
    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;
 }

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

见代码link

【讨论】：

【解决方案3】：

你差不多完成了，但有一点点变化我认为遵循 CSS 代码会对你有所帮助。

.working-btn-white button {
   height:60px;
   width:155px;
   font-weight: bold;
   background: #f1f1f1;
   border-radius:30px;
   border:2px solid #f2f2f2;
   color:#fff;
   outline:none;
   position: relative;
   margin: 25px;
   overflow: hidden;
 }

 .working-btn-white button:hover {  
   background: #fff;
   color:blue;
 }

【讨论】：

它实际上只是填充它，但我想要从左到右填充的效果

【解决方案4】：

只需给你的 body 添加一些深色，因为你的按钮颜色是白色的，如果你的背景也是白色的，那么按钮将不可见。所以改变你的 body 颜色或 div 背景颜色。

使用其中之一：

  body{background-color:#c7c7c7;}

或

   div{background-color:#c7c7c7;}

查看我的代码，我只是在 body 元素中添加了 background-color:#c7c7c7;。

 body{
 background-color:#c7c7c7;
 }
 
 
 .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;
 }

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

【讨论】：

@AmareshSM ji 你能告诉我我的代码不工作的原因吗