child 和 parent 元素的不同 css3 交易速度

Question

parent 和 child div 的交易速度是否可以不同？

i.g。 parent 将在 4 秒内转换，而 child 将在 1 秒内对同一事件做出反应。 child 和 parent.

的相同属性已更改

示例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;
}

如果将鼠标悬停在 child div 上，您可以看到 child 元素忽略了 transition-duration: 1s;。我想要的是 child 元素转换速度快 4 倍。

Answer 1

是的，你可以

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

Answer 2

我找到了解决办法。需要做的是重复应该在子元素中转换的父元素的属性。所以在特殊情况下，悬停属性的父元素也应该为子元素重复。

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

jsfiddle link

child 和 parent 元素的不同 css3 交易速度

Different css3 transaction speed for child and parent element

css

css-transitions