目标：在悬停之前

Question

我有一个我在CSS中创建的按钮。它很好用，除非我将鼠标悬停在它上面，整个区域都不会变绿。相反，它的一部分是一个白色块。我该如何解决这个问题？

https://jsfiddle.net/01vb0ybt/

    button {
        font-size: 1em;
        background: #fff;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border: 1px solid #1588cb;
        color: #1588cb;
        font-weight: 400;
        height: 60px;
        width: 300px;
        position: relative;
        margin: 25px 0 50px 0;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -o-box-sizing: content-box;
        box-sizing: content-box;
    }
    .full-circle {
        display:block;
        border: 1px solid #1588cb;
        width: 45px;
        /*
        -moz-border-radius: 45px / 36px;
        -webkit-border-radius: 45px / 36px;*/
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -o-box-sizing: content-box;
        box-sizing: content-box;
        border-radius: 45px / 38px;
        height: 41px;
        background: #fff;
        position: absolute;
        left: 50%;
        margin-left: -17px;
        bottom: -17px;
    }
    .full-circle:before {
        content:'+';
        width: 47px;
        height: 26px;
        background-color: white;
        position: absolute;
        left: -1px;
        top: -1px;
        line-height: 53px;
    }

button:hover, button:hover > span {
    background:green;
    color:white
}
}

<button>News <span class="full-circle">
</span>
</button>

Answer 1

问题：当您将鼠标悬停在按钮上时，您忘记将background-color span:before（background-color: white;）的button:hover > span:before更改为绿色。

只需将此 button:hover, button:hover > span, /* New selector */ button:hover > span:before { background:green; color:white } 添加到您的CSS中即可。

Jsfiddle

var https_options = {
  key: fs.readFileSync('/etc/ssl/self-signed/server.key'),
  certificate: fs.readFileSync('/etc/ssl/self-signed/server.crt')
};
var https_server = restify.createServer(https_options);

Answer 2

将此样式添加到您的css

button:hover .full-circle:before {
    background-color: green;
}

Answer 3

添加此CSS样式。

button:hover .full-circle:before{
    background: green;
}

Answer 4

添加button:hover > .full-circle:before以格式化背景绿色。请参阅代码段

button {
  font-size: 1em;
  background: #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px solid #1588cb;
  color: #1588cb;
  font-weight: 400;
  height: 60px;
  width: 300px;
  position: relative;
  margin: 25px 0 50px 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}
.full-circle {
  display:block;
  border: 1px solid #1588cb;
  width: 45px;
  /*
  -moz-border-radius: 45px / 36px;
  -webkit-border-radius: 45px / 36px;*/
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
  border-radius: 45px / 38px;
  height: 41px;
  background: #fff;
  position: absolute;
  left: 50%;
  margin-left: -17px;
  bottom: -17px;
}
.full-circle:before {
  content:'+';
  width: 47px;
  height: 26px;
  background: #fff;
  position: absolute;
  left: -1px;
  top: -1px;
  line-height: 53px;
}
button:hover, 
button:hover > span, 
button:hover > .full-circle:before {
  background:green;
  color:white
}

<button>News <span class="full-circle">
  </span>
</button>