li：悬停背景效果落后于父容器的背景

Question

我正在努力实现这一目标 social icons hover effect

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

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规则，因此转换可以双向进行。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;