CSS按钮悬停不与背景色工作

Question

我实际试着使用一些按钮悬停效果这样一个位置：http://codepen.io/davidicus/pen/emgQKJ

现在我坚持，因为按钮悬停效果并不当我工作在我的div #menu上使用background-color。

有人可以向我解释我在这里做错了吗？

<div id="wrapper"> 
     <div id="header"> 
     </div> 
     <div id="gradient"> 
     </div> 
     <div id="menu"> 
      <a href="index.html" class="btn btn-4"><span>Startseite</span></a> 
     </div> 
     <div id="gradient2"> 
     </div> 
     <div id="content"> 
      <div id="innerContent"> 
      </div> 
     </div> 
     <div id="footer"> 
      <div id="copyright"></div> 
     <div> 
    </div> 

MyCSS：

html, body 
{ 
    box-sizing: border-box; 
    height: 100%; 
    width: 100%; 
} 
body 
{ 
    background-color: #61DC00; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 400; 
} 
#wrapper 
{ 
    width:960px; 
    min-height:500px; 
    margin: 0 auto; 
    border: 1px solid black; 
} 
#menu { 
    width:960px; 
    height:30px; 
    padding-bottom:2px; 
    /* background-color: #fff; */ 
} 


.btn-4 { 
    border: 1px solid; 
    overflow: hidden; 
    position: relative; 
} 
.btn-4 span { 
    z-index: 20; 
} 
.btn-4:after { 
    background: #F50606; 
    content: ""; 
    height: 155px; 
    left: -75px; 
    position: absolute; 
    top: -50px; 
    -webkit-transform: rotate(35deg); 
     -ms-transform: rotate(35deg); 
      transform: rotate(35deg); 
    -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); 
      transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); 
    width: 50px; 
    z-index: -10; 
} 

.btn-4:hover:after { 
    left: 120%; 
    -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); 
      transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); 
} 

#menu div , a{ 
    width:120px; 
    height:27px; 
    color:#000000; 
    float:left; 
    font-weight:none; 
    text-decoration:none; 
    text-align:center; 
    padding-top:4px; 
    font-family:verdana,arial; 
    font-size:16; 
} 
#content { 
    width:960px; 
    height:660px; 
    background-color:#fff; 
    margin:auto; 
    padding-top:20px; 
} 
#header 
{ 
    width:960px; 
    height:122px; 
    background-color: #fff; 
    margin: 0 auto; 
} 
#gradient { 
    height:10px; 

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,dfe5d7+40,acb1ac+100 */ 
background: rgb(252,255,244); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(172,177,172,1) 100%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(172,177,172,1) 100%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(172,177,172,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#acb1ac',GradientType=0); /* IE6-9 */ 

} 

#gradient2 { 
    height:10px; 

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#acb1ac+0,dfe5d7+100,fcfff4+100 */ 
background: rgb(172,177,172); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(172,177,172,1) 0%, rgba(223,229,215,1) 100%, rgba(252,255,244,1) 100%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(top, rgba(172,177,172,1) 0%,rgba(223,229,215,1) 100%,rgba(252,255,244,1) 100%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, rgba(172,177,172,1) 0%,rgba(223,229,215,1) 100%,rgba(252,255,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acb1ac', endColorstr='#fcfff4',GradientType=0); /* IE6-9 */ 

} 

的jsfiddle：https://jsfiddle.net/qm2cae9r/1/

Answer 1

你.btn-4：选择与

z-index: -10; 

后，取下它，不错的效果会再工作