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属性在其位置上不起作用：绝对，因此您需要让父级潜水的不透明度小于1（比如说99），然后我认为它适用于您。您可以使用此链接进一步查看https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 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

Answer 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;
 }

Answer 4

只需为您的身体添加一些深色，因为您的按钮颜色是白色，并且如果您的背景也是白色，则该按钮将不可见。因此请更改您的身体颜色或div背景颜色。

使用其中之一：

  body{background-color:#c7c7c7;}

或

   div{background-color:#c7c7c7;}

检出我的代码，只是我在主体元素中添加了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>

为什么悬停颜色没有填充

4 个答案: