Как сделать эффект перехода css применим ко всем его детям?

Question

Что им пытаются сделать, это глобальное класс

.animate { 
    -webkit-transition:0.2s; 
    -moz-transition:0.2s; 
    -o-transition:0.2s; 
    transition:0.2s; 
} 

и применять его в качестве

<div class="element animate"> 
<div class="child"></div> 
</div> 

Однако, когда я пытаюсь

.element:hover .child{ 
    background:#000; 
} 

оно не применяется переход. Есть какой-либо способ сделать это? или мне просто нужно применить .animate для каждого дочернего элемента?

Кроме того, о том, что я пытаюсь сделать, это практично?

Спасибо!

Answer 1

Вместо того, чтобы применить его к каждому ребенку, просто использовать прямой селектор детей (>):

.animate > * { 

Преимущество этого в том, что вы не должны применять child класс к каждому ребенку. (Вы также можете держать класс ребенка, и сделать .child {, но это именно то, что вы пытаетесь избежать.)

Или, если вы хотите анимировать каждый ребенок, независимо от его глубины (т.е. <div class='animate'><div><div>This one</div></div></div>), сделайте следующее:

.animate * { 

Answer 2

Попробуйте это,

.animate> * { 
    -webkit-transition:0.2s; 
    -moz-transition:0.2s; 
    -o-transition:0.2s; 
    transition:0.2s; 
} 

Он подберет все прямые ребенка .animate

Если вы хотите выберите всех детей с классом .child затем используйте

.animate * { 
    -webkit-transition:0.2s; 
    -moz-transition:0.2s; 
    -o-transition:0.2s; 
    transition:0.2s; 
}