子和父元素的不同css3事务处理速度

Question

是否有可能针对父子事务处理事件具有不同的事务处理速度？

i.g.父母会在4秒内过渡，而孩子会在1秒内对同一事件做出反应。儿童和父母的相同属性已更改。

示例here。

HTML

<div class="d1"> 
    Parent div<br/> 
    Parent div 
    <div class="d2"> 
     HOVER ME 
    </div>  
</div> 

CSS

.d1 { 
    background-color: #F32423; 
    transition: all 4s linear; 
    height: 200px; 
    width: 200px; 
} 
.d1:hover { 
    opacity: 0.2; 
    margin-left:40px; 
} 
.d2 { 
    background-color: #FFFF2F; 
    transition-duration: 1s; 
    height: 100px; 
} 

如果将鼠标悬停孩子的div，你可以看到transition-duration: 1s;针对子元素忽略。我想要的是让子元素转换速度提高4倍。

Answer 1

我找到了解决办法。所需要的是重复应该在子元素中进行转换的父代的属性。因此，在特定情况下，关于悬停属性的父项也应为子元素重复。

.d1:hover .d2 { 
    opacity: 0.2; 
    margin-left:40px; 
} 

的jsfiddle link

Answer 2

是的，你可以

.myDiv .popup { 
transition-duration: 1s 
}