使用以下方法保持样式：悬停直到转换完成为止？ [英] Keeping style applied using :hover until transition complete?

问题描述

我在页面上有一堆瓷砖，当用户在鼠标上面展开时，它会展开。扩展的一个应该有最高的 z-index ，这是可行的，但我需要保持z-index直到大小转换完成。有没有办法只使用CSS，没有JavaScript ？由于我使用的是转换，我并不太担心这里的兼容性，我正确应用渐进增强。

I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index, and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly.

这是一个jsFiddle 演示了这一点。鼠标在A上;它转换出来。鼠标离开它，但是，它落在B.我需要它停留在B前面，直到过渡完成。

Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an elegant way to do this?

推荐答案

您需要定义 z-index ，并对其进行动画处理。

You need to define the z-index, as well as animate it.

在Firefox（8.0.1）和Webkit中有效。

This works in Firefox (8.0.1) and Webkit.

这篇关于使用以下方法保持样式：悬停直到转换完成为止？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！