z-index的CSS3動畫問題

Question

我在這個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

嘗試將初始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; } 

Answer 3

嘗試將其添加到CSS中（並刪除#a:hover, #b:hover {...}中的z-index修飾符）：

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

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

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