CSS3 анимация проблема с z-index

Question

У меня есть два элемента в этом jsFiddle . Каждый расширяется при наведении курсора на :hover.

Я хочу, чтобы синяя анимация соответствовала красной. Прямо сейчас красный расширяется поверх синего при наведении мыши, но синий расширяется ниже красного. Я хотел бы, чтобы каждый анимировал поверх другого. Вероятно, это можно сделать, изменив z-index на :hover, но это не очень хорошо работает.

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 (и удалите модификатор z-index в #a:hover, #b:hover {...}):

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

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

Пример: http://jsfiddle.net/h6ztv/3/