的z-index不與我的動畫

Question

下面的代碼（HTML & CSS）讓我瘋狂的工作... jsfiddle link

如何使用的z-index（或其他東西）有3個圈總是有形項目。 藍色的那個沒問題，但是黃色和紅色的隱藏了他們左邊的圓圈。

在此先感謝您的幫助！

<div id="rSociaux" class="col-md-6 noSpace"> 
<a href="http://www.facebook.com/lesdieuxduvin" target="_blank" id="bg-fb" class="tile-share"> 
    <div class="social-color-bg fb"></div> 
    <svg class="ontop" height="100" width="100"> 
     <circle cx="50" cy="50" r="20" fill="blue" /> 
    </svg> 
</a> 
<a href="http://www.twitter.com/lesdieuxduvin" target="_blank" class="tile-share"> 
    <div class="social-color-bg twitter"></div> 
    <svg class="ontop" height="100" width="100"> 
     <circle cx="50" cy="50" r="20" fill="yellow" /> 
    </svg> 
</a> 
<a href="http://www.twitter.com/lesdieuxduvin" target="_blank" id="bg-li" class="tile-share"> 
    <div class="social-color-bg linkedin"></div> 
    <svg class="ontop" height="100" width="100"> 
     <circle id="svgLi" cx="50" cy="50" r="20" fill="red" /> 
    </svg> 
</a> 

CSS：

#rSociaux { 
background-color: #a55fa2; 
} 

.ontop { 
position: relative; 
z-index: 10; 
} 

.tile-share { 
display: inline-block; 
position: relative; 
left: 33%; 
-webkit-transform: translateX(-50%) translateY(-0%); 
-moz-transform: translateX(-50%) translateY(-0%); 
-ms-transform: translateX(-50%) translateY(-0%); 
-o-transform: translateX(-50%) translateY(-0%); 
transform: translateX(-50%) translateY(-0%); 
} 

#rSociaux { 
overflow: hidden; 
} 

#rSociaux svg { 
position: relative; 
z-index: 1000; } 

#rSociaux .social-color-bg { 
pointer-events: none; 
position: absolute; 
border-radius: 100%; 
top: 50%; 
left: 50%; 
-webkit-transform: translateX(-50%) translateY(-50%); 
-moz-transform: translateX(-50%) translateY(-50%); 
-ms-transform: translateX(-50%) translateY(-50%); 
-o-transform: translateX(-50%) translateY(-50%); 
transform: translateX(-50%) translateY(-50%); 
-webkit-transition: 1s; 
-moz-transition: 1s; 
-o-transition: 1s; 
transition: 1s; 
} 

#rSociaux .social-color-bg.fb { 
background: blue; 
} 

#rSociaux .social-color-bg.twitter { 
background: yellow; 
} 

#rSociaux .social-color-bg.linkedin { 
background: red; 
} 


#rSociaux .tile-share:hover .social-color-bg { 
width: 100% !important; 
height: 100% !important; 
-webkit-transform: scale(20); 
-moz-transform: scale(20); 
-ms-transform: scale(20); 
-o-transform: scale(20); 
transform: scale(20); 
} 

Answer 1

添加以下內容：

#rSociaux .tile-share{ 
    z-index:10; 
} 

#rSociaux .tile-share:hover{ 
    z-index:9; 
} 

和刪除其他的z-index引用解決問題

here is工作小提琴

Answer 2

您的z-index不起作用，因爲您將其應用於完全不同的元素。基於z-index的更改使用相同的元素進行懸停和非懸停。 z-index是不是絕對值，其中z-index較高的元素總是處於最高位置。

.tile-share{ 
    z-index: 5; 
} 

.tile-share:hover{ 
    z-index: 3; 
} 

http://jsfiddle.net/dqup4ptf/4/

Answer 3

您也可以將a標籤，如：

#rSociaux >a{z-index: 10;} 
#rSociaux >a:hover{z-index: 9;} 

http://jsfiddle.net/maio/dqup4ptf/6/