Сохранение стиля с использованием: hover до завершения перехода?

Question

У меня есть куча плиток на странице, которые расширяются, когда пользователь наводит на них курсор.У расширенного должен быть самый высокий z-index, и это работает, но мне нужно, чтобы z-индекс оставался до завершения изменения размера.Есть ли способ сделать это, используя только CSS, без JavaScript ?Так как я использую переходы, я не слишком беспокоюсь о совместимости здесь, я применил прогрессивное улучшение правильно.

Вот jsFiddle , который демонстрирует это.Наведите курсор мыши на A;это уходит.Мышь от него, однако, и он отстает от B. Мне нужно, чтобы он оставался перед B, пока переход не завершится.Есть ли элегантный способ сделать это?

Answer 1

Вам нужно определить z-index, а также анимировать его.

Это работает в Firefox (8.0.1) и Webkit.

Answer 2

Вам также нужно установить z-index для перехода: http://jsfiddle.net/uHJwT/2/

Answer 3

Попробуйте использовать переходы, как в http://jsfiddle.net/frozenkoi/YK52N/ (обратите внимание на комментарии в разделе CSS для .item и .item:hover)

Хитрость в том, чтобы использовать переходы и для свойства z-index. Например, вы можете установить значение 10 для обычных предметов и 11 для наведенных. Вы также должны использовать transition-delay, чтобы анимация перемещения мыши не сбрасывала z-index сразу. Затем добавьте другое значение в transition-delay к правилу для :hover со значением ноль, чтобы z-index обновлялось сразу же, когда мышь входит в элемент.

Короче говоря, .item имеет переход для мыши вне элемента и .item:hover правила для того, когда мышь перемещается внутрь.

Answer 4

Вот одно решение: http://jsfiddle.net/uHJwT/4/

По сути, он использует другой div-обертку, который имеет достаточную ширину и высоту для покрытия анимированной поверхности - при наведении курсора он увеличивает свой z-индекс, так что анимированный div остаетсянаверху.Конечно, это не полностью защищенное решение - оно основано на том факте, что обычное зависание будет движением вниз, и это работает для этого - но зависание в диагональном направлении не будет работать.Но, похоже, разумное решение только для CSS - я бы предпочел использовать js, чтобы получить идеальное.