正如您在this example中所看到的,为元素设置:hover
行为似乎会延迟其状态被其子元素识别。
例如这个HTML,
<p>Here's some text.
<span>This will highlight later.</span>
Here's some more text.</p>
使用CSS:
p:hover{
color:#FE6
}
p,span{
-webkit-transition-property:all;
-webkit-transition-duration:1s;
-moz-transition-property:all;
-moz-transition-duration:1s;
-o-transition-property:all;
-o-transition-duration:1s;
}
在父元素转换结束时使跨度开始转换。这是设计,还是记录为错误?
答案 0 :(得分:1)
我相信会发生什么:
- 过渡的开始
醇>当可动画属性的值发生变化时,实现必须 根据的值确定要开始的转换 '过渡 - 财产','过渡期', 'transition-timing-function'和'transition-delay'属性 改变的时间。由于此规范没有定义什么 属性变化被认为是同时发生的,作者应该知道 在很短的时间内改变任何过渡属性 在进行可能转换的更改后可能会导致行为 因实施变化而异,因此可能会有所不同 在某些实施中被认为是同时的而不是其他的。
一旦物业的过渡开始,它必须继续 基于原始计时功能,持续时间和延迟运行, 即使是'transition-timing-function','transition-duration',或者 “转换延迟”属性在转换完成之前发生更改。 但是,如果'transition-property'属性发生变化,那么 过渡不会开始,过渡必须停止(和 财产必须立即改为最终价值。)
当计算出的值时,实现不得启动转换 由于声明性动画而导致属性发生变化(而不是 脚本动画)。
实现也不能在计算时启动转换 值更改,因为它是从(直接或间接)继承的 转换同一属性的另一个元素。
http://www.w3.org/TR/css3-transitions/#the-transition-property-property-
由于您将选择器指定为p, span
且span
嵌套在p
内,p
中的颜色更改会阻止span
并使其延迟
请注意,color
是继承的,因此您无需在两个元素上指定它 - p
就足够了。