李：ホバー背景の効果は、私が下に移動し、マウスオーバーでボックスを埋める必要があり、この <a href="http://i.stack.imgur.com/IFYYU.png" rel="nofollow">social icons hover effect</a></p> <p>暗い背景を達成しようとしている親コンテナの背景

Question

後ろに行きます。これは、親コンテナにバックグラウンドを使用しないで、バックグラウンドイメージが使用されているときに、ホバー効果が親コンテナの後ろに来るとき、完全に機能します。

Screenshot: not showing when bg image set for parent container

と不透明度の値を親コンテナに設定されているとき、私は効果を見ることができます。

私は親に対して負のz-インデックスを使用しようとしましたが、何らかの理由で動作しませんでした。

私のコード

.hero { 
 
\t background: url('http://lorempixel.com/output/abstract-q-g-640-480-3.jpg') no-repeat; 
 
\t background-size: cover; 
 
\t height: 550px; 
 
\t 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 { 
 
\t background: url('http://lorempixel.com/output/abstract-q-g-640-480-3.jpg') no-repeat; 
 
\t background-size: cover; 
 
\t height: 550px; 
 
\t 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>