我在页面上有一堆磁贴,当用户将鼠标移到它们上面时,它们会展开。扩展后的应该有最高的z-index
,这是可行的,但我需要z索引保持直到大小转换完成。是否有一种方法可以做到这一点,只使用CSS, 没有JavaScript?因为我使用的是过渡,所以我不太担心这里的兼容性,我正确地应用了渐进式增强。
这里有一个jsFiddle来演示这个。鼠标放在A上;它会过渡出来。但是,将鼠标移开它,它就会落在B后面。我需要它保持在B前面,直到转换完成。是否有一种优雅的方式来做到这一点?
您需要定义z-index
,以及动画。
此功能适用于Firefox(8.0.1)和Webkit。
您需要设置z-index
也过渡:http://jsfiddle.net/uHJwT/2/
尝试使用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
有鼠标移入项的规则。
这里有一个解决方案:http://jsfiddle.net/uHJwT/4/
实质上,它使用另一个具有足够宽度的包装器div &覆盖动画表面的高度-悬停时,它会提升其z-index,使动画div保持在顶部。当然,这不是一个完全可靠的解决方案——它是基于这样一个事实,即典型的悬停是向下移动的,它适用于这种情况——但在对角线方向悬停是行不通的。但似乎是一个合理的CSS唯一的解决方案-我宁愿使用js得到一个完美的。