使用 :hover 保持应用样式直到转换完成？
我在页面上有一堆图块，当用户将鼠标悬停在它们上时，这些图块会展开。展开后的 z 索引应具有最高的 z 索引，这是可行的，但我需要保留 z 索引，直到大小转换完成。有没有办法只使用CSS而不使用JavaScript来做到这一点？由于我使用的是过渡，因此我不太担心这里的兼容性，我正确地应用了渐进增强。
这里有一个 jsFiddle 演示了这一点。鼠标悬停在 A 上；它过渡出来。然而，鼠标离开它，它就会落后于 B。我需要它保持在 B 的前面，直到转换完成。有没有一种优雅的方法来做到这一点？
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.
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您需要定义
z-index并为其设置动画。这适用于 Firefox (8.0.1) 和 Webkit。
You need to define the
z-index, as well as animate it.This works in Firefox (8.0.1) and Webkit.
您还需要设置
z-index进行转换： http://jsfiddle.net/ uHJwT/2/You need to set
z-indexto transition too: http://jsfiddle.net/uHJwT/2/尝试使用 http://jsfiddle.net/frozenkoi/YK52N/ 中的过渡（请注意中的注释CSS 部分，对于
.item和.item:hover)技巧是对
z-index属性使用过渡 也。例如，您可以将正常项目的值设置为 10，将悬停项目的值设置为 11。您还必须使用transition-delay，以便将鼠标移出的动画不会立即重置z-index。接下来，将不同的值添加到:hover规则的transition-delay中，值为零，以便z-index更新当鼠标进入该项目时立即。简而言之，
.item具有鼠标移出项目的过渡，而.item:hover则具有鼠标移入项目时的规则。Try using transitions like in http://jsfiddle.net/frozenkoi/YK52N/ (note the comments in the CSS section, for both the
.itemand.item:hover)The trick is to use transitions for the
z-indexproperty too. You can set, for example, a value of 10 for the normal items and 11 for the hovered ones. You also have to usetransition-delayso that the animation for moving the mouse out doesn't reset thez-indexinmediately. Next, add a different value totransition-delayto the rule for:hoverwith a value of zero so that thez-indexdoes update inmediately when the mouse goes into the item.In short,
.itemhas the transition for mouse out of the item and.item:hoverthe rules for when the mouse moves in.这是一个解决方案： http://jsfiddle.net/uHJwT/4/
本质上，它使用另一种解决 方案具有足够宽度和宽度的包装 div覆盖动画表面的高度 - 悬停时，它会提升其 z 索引，以便动画 div 保持在顶部。当然，这不是完全可靠的解决方案 - 它基于这样一个事实：典型的悬停关闭将是向下移动，并且它适用于此 - 但沿对角线方向悬停关闭将不起作用。但这似乎是一种合理的仅 CSS 解决方案 - 我宁愿使用 js 来获得完美的解决方案。
Here's the one solution: http://jsfiddle.net/uHJwT/4/
Essentially, it uses another wrapper div that has sufficient width & height to cover animated surface - on hover, it elevates its z-index so that the animated div remains on top. Of course, this is not full-proof solution - it is based on the fact that typical hover off would be down movement and it works for that - but hover off in diagonal direction would not work. But seems to be a reasonable CSS only solution - I would rather used js to get a perfect one.