元素跳過懸停的其他元素的CSS動畫

Question

我想創建一個菜單，看起來有點像我們有時可以看到的論文「應用程序面板」。

所以我有6個元素，並排側，它們之間沒有空間，當我徘徊其中的一個稍微彈出，你可以在這裏看到：

#account-bubble .account-param { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t position: absolute; 
 
\t display: inline-block; 
 
\t width: 60px; 
 
\t height: 60px; 
 
\t border: 1px solid #CCC; 
 
\t background: #F7F7F7; 
 
\t -webkit-transition-duration: 0.3s; 
 
\t transition-duration: 0.3s; 
 
\t -webkit-transition-property: transform; 
 
\t transition-property: transform; 
 
\t z-index: 0; 
 
} 
 
#account-bubble .account-param:hover, #account-bubble .account-param:focus, #account-bubble .account-param:active { 
 
\t -webkit-transform: scale(1.2); 
 
\t transform: scale(1.2); 
 
\t z-index: 5000; 
 
} 
 

 
.p1 { 
 
\t top: 15px; 
 
\t left: 15px; 
 
} 
 

 
.p2 { 
 
\t top: 15px; 
 
\t left: 74px; 
 
} 
 

 
.p3 { 
 
\t top: 15px; 
 
\t left: 133px; 
 
} 
 

 
.p4 { 
 
\t top: 74px; 
 
\t left: 15px; 
 
} 
 

 
.p5 { 
 
\t top: 74px; 
 
\t left: 74px; 
 
} 
 

 
.p6 { 
 
\t top: 74px; 
 
\t left: 133px; 
 
} 
 

 
#account-bubble .profil-picture img { 
 

 
} 
 

 
#account-bubble .account-param { 
 
\t 
 
}

<div id="account-bubble"> 
 
\t \t \t <div class="account-param p1"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p2"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p3"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p4"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p5"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p6"> 
 
\t \t \t </div> 
 
\t \t </div>

要做到這一點，我必須將我的元素的位置設置爲absolute，然後將它們中的每個1px放置在它們的元素鄰居上，以避免出現2px邊框。 （由於轉換css導致元素彈出，所以無法使用帶有邊框摺疊的表格 - 它會在沒有邊框的情況下彈出）。

我的問題是，當我懸停一個元素時，我的代碼執行了我期望，但是當我離開我的光標時，元素立即將其z-索引重置爲其初始值，使得「unhover動畫」非常難看。

有沒有人有任何想法/建議如何我可以實現這個把戲？或者更好的替代我的代碼？ （我會優先考慮堅持使用CSS）

感謝您的幫助。

Answer 1

如果你想減少z-index慢慢地，你可以使用transition爲確保包括在您的過渡。

-webkit-transition-property: transform, z-index; 
transition-property: transform, z-index; 

---

如果你想使用不同的懸停/懸停關閉選項，你可以。

#element { 
    /* HOVER OFF */ 
    -webkit-transition-property: transform, z-index; 
    transition-property: transform, z-index; 
} 

#element:hover { 
    /* HOVER ON */ 
    -webkit-transition-property: transform; 
    transition-property: transform; 
} 

Answer 2

的Z-index設置動畫，方法是使用transition-property: all;

#account-bubble .account-param { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t position: absolute; 
 
\t display: inline-block; 
 
\t width: 60px; 
 
\t height: 60px; 
 
\t border: 1px solid #CCC; 
 
\t background: #F7F7F7; 
 
\t -webkit-transition-duration: 0.3s; 
 
\t transition-duration: 0.3s; 
 
    /* change the transition-property to all */ 
 
\t -webkit-transition-property: all; 
 
\t transition-property: all; 
 
\t z-index: 0; 
 
} 
 
#account-bubble .account-param:hover, #account-bubble .account-param:focus, #account-bubble .account-param:active { 
 
\t -webkit-transform: scale(1.2); 
 
\t transform: scale(1.2); 
 
\t z-index: 5000; 
 
} 
 

 
.p1 { 
 
\t top: 15px; 
 
\t left: 15px; 
 
} 
 

 
.p2 { 
 
\t top: 15px; 
 
\t left: 74px; 
 
} 
 

 
.p3 { 
 
\t top: 15px; 
 
\t left: 133px; 
 
} 
 

 
.p4 { 
 
\t top: 74px; 
 
\t left: 15px; 
 
} 
 

 
.p5 { 
 
\t top: 74px; 
 
\t left: 74px; 
 
} 
 

 
.p6 { 
 
\t top: 74px; 
 
\t left: 133px; 
 
} 
 

 
#account-bubble .profil-picture img { 
 

 
} 
 

 
#account-bubble .account-param { 
 
\t 
 
}

<div id="account-bubble"> 
 
\t \t \t <div class="account-param p1"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p2"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p3"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p4"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p5"> 
 
\t \t \t </div> 
 
\t \t \t <div class="account-param p6"> 
 
\t \t \t </div> 
 
\t \t </div>