在Hover上弹出其他元素的元素的CSS动画

Question

我试图创建一个看起来有点像这些菜单的应用程序面板＆＃34;我们有时可以看到。

所以我有6个元素，并排，它们之间没有任何空格，当我将其中一个悬停时，它会略微弹出，如你所见：

＆＃13;

＆＃13;

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

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

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

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

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

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

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

#account-bubble .profil-picture img {

}

#account-bubble .account-param {
	
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

要做到这一点，我必须将我的元素的位置设置为absolute，然后将它们中的每一个定位在它们的元素邻居上1px，以避免具有2px边界。 （由于变换css导致元素弹出，因此无法使用具有边框折叠的表格 - 它将弹出没有边框。）

我的问题是当我悬停一个元素时，我的代码会按照我的预期进行，但当我离开光标时，元素立即将其z-index重置为其初始值，制作＆＃34;取消悬停动画＆＃34;非常难看。

有没有人对如何实现这一伎俩有任何想法/建议？或者是我代码的更好替代品？ （我会更喜欢坚持使用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;

将其包含在转场中

＆＃13;

＆＃13;

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

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

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

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

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

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

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

#account-bubble .profil-picture img {

}

#account-bubble .account-param {
	
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;