我想創建一個菜單,看起來有點像我們有時可以看到的論文「應用程序面板」。元素跳過懸停的其他元素的CSS動畫
所以我有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)
感謝您的幫助。
感謝您的回答,這比我所做的更好,謝謝。然而,動畫仍然有點草率,你知道是否有辦法讓過渡效果只有徘徊,但不是當我懸停時? CSS允許嗎? – apatik
@apatik是的,這是可能的。檢查我更新的答案。 – Genhis
謝謝!現在,我可以調整數字以獲得完美的幻燈片。 – apatik