Question

正如您在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;
}

在父元素转换结束时使跨度开始转换。这是设计，还是记录为错误？

Answer 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就足够了。

CSS3转换会延迟事件捕获/冒泡吗？

1 个答案: