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

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

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


css css-transitions z-index
person Ry-♦    schedule 25.11.2011    source источник
comment
@MademoiselleGeek: теперь связан с jsFiddle. :П   -  person Ry-♦    schedule 25.11.2011
comment
@minitech, очевидная вещь, которая пришла мне в голову, заключалась в том, чтобы анимировать z-индекс, а также. z-index является анимируемым свойством, но, к сожалению, это не работает.   -  person VinayC    schedule 25.11.2011
comment
@VinayC: Я мог бы заставить его работать, но проблема в том, что для него требуются точно рассчитанные значения для z-index, что будет непросто сделать. Я бы предпочел использовать JavaScript, если это единственное решение...   -  person Ry-♦    schedule 25.11.2011

Ответы (4)


arrow_upward
2
arrow_downward

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

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

person bookcasey    schedule 25.11.2011

arrow_upward
2
arrow_downward

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

person noob    schedule 25.11.2011
comment
Гм... ты пробовал это? Это не работает. Поведение идентично. - person Ry-♦; 25.11.2011
comment
Это была первая вещь, которую я попробовал, но, похоже, она не работает в FF! - person VinayC; 25.11.2011
comment
@VinayC: Оказывается, FF нужен z-index для перехода от. - person Ry-♦; 25.11.2011

arrow_upward
1
arrow_downward

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

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

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

person frozenkoi    schedule 25.11.2011

arrow_upward
0
arrow_downward

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

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

person VinayC    schedule 25.11.2011