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

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

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