Question

我在this jsFiddle中有两个元素。每个都通过:hover转换扩展鼠标悬停。

我希望蓝色动画与红色动画匹配。现在，红色的那个在鼠标悬停时扩展到蓝色的顶部，但是蓝色的扩展在下的红色。我希望每个人能够在之上设置动画。这可能是通过更改:hover上的z-index来完成的，但这似乎并不是很好。

Answer 1

由于您要为所有属性设置动画，因此z-index会在动画结束时设置动画并从0到1 步进。

只需为您需要的属性添加动画效果即可：

#a, #b {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    -webkit-transition: width .6s ease-in-out;
    -moz-transition: width .6s ease-in-out;
    -o-transition: width .6s ease-in-out;
    -ms-transition: width .6s ease-in-out;
    transition: width .6s ease-in-out;
}

http://jsfiddle.net/duopixel/hfM7E/

Answer 2

尝试将此添加到CSS（并删除z-index中的#a:hover, #b:hover {...}修饰符）：

#a {
    background: #55a;
    left: 0;
    z-index: 1;
}

#b:hover {
    z-index: 2;   
}

示例：http://jsfiddle.net/h6ztv/3/

Answer 3

尝试将初始z-index值设置为“0”

#a, #b {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    z-index:0;
    }

#a:hover, #b:hover {
    width: 600px;
    z-index: 1;
}

z-index的CSS3动画问题

3 个答案: