li :hover 背景效果在父容器的背景后面

Question

深色背景应向下移动并在鼠标悬停时填满方框。当我没有为父容器使用背景但使用背景图像时悬停效果在父容器后面时，这非常有效。

Screenshot: not showing when bg image set for parent container

我可以看到为父容器设置不透明度值时的效果。

我试过为父级使用负 z-index，但由于某种原因无法正常工作。

我的代码

.hero {
 background: url('http://lorempixel.com/output/abstract-q-g-640-480-3.jpg') no-repeat;
 background-size: cover;
 height: 550px;
 padding: 40px 10px;
  
    /*opacity :0.5; Works in Background*/
}
.social-icons {
  
}

.social-icons li {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  padding: 60px 5px 5px 60px;
  text-decoration: none;  
  position: relative; 
  border: 3px solid #000;
  overflow: hidden;
  transition: all .5s linear;
}

.social-icons li:hover {
  color: #000;

}
.social-icons li:hover:before {
  left: -55px;  
}

.social-icons li:before {
  content: "";
  position: absolute;
  top: 0;
  left: -280px;
  background: #000;
  height: 100%;
  width: 250px;
  transform: skew(-50deg);
  z-index: -1;
  transition: all .5s linear;
}
.social-icons li a {
  color: #000000;
  display:block;
}
.social-icons li:hover a {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<section class="hero">
  <div class="container">
     <div class="row">
        <div class="social-icons">
           <ul>
             <li><a href="#"><i class="fa fa-facebook"></i></a></li>
             <li><a href="#"><i class="fa fa-twitter"></i></a></li>
             <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
             <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
            </ul>
         </div>
       </div>
    </div>
  </section>

Answer 1

这样做，给锚 a 一个位置，即 position: relative 并删除 z-index.

我也稍微调整了你的 li:before/li:hover:before 规则，所以过渡是双向的。

.hero {
 background: url('http://lorempixel.com/output/abstract-q-g-640-480-3.jpg') no-repeat;
 background-size: cover;
 height: 550px;
 padding: 40px 10px;
    /*opacity :0.5; Works in Background*/
}
.social-icons { 
}
.social-icons li {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  padding: 60px 5px 5px 60px;
  position: relative; 
  border: 3px solid #000;
  overflow: hidden;
}
.social-icons li:hover {
  color: #000;
}
.social-icons li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 280px;
  background: #000;
  height: 100%;
  transform: skew(-50deg);
  width: 250px;
  transition: left .2s linear;
}
.social-icons li:hover:before {
  left: -20px;
  transition: left .2s linear;
}
.social-icons li a {
  position: relative;
  color: #000000;
  display:block;
}
.social-icons li:hover a {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<section class="hero">
  <div class="container">
     <div class="row">
        <div class="social-icons">
           <ul>
             <li><a href="#"><i class="fa fa-facebook"></i></a></li>
             <li><a href="#"><i class="fa fa-twitter"></i></a></li>
             <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
             <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
            </ul>
         </div>
       </div>
    </div>
  </section>

li :hover 背景效果在父容器的背景后面

li :hover background effect goes behind the parent container's background

css

z-index

background-image

html-lists

css-transitions