Отключения последовательных переходов наследственных свойств дочерних элементов

Question

Глядя на этом примере:

http://jsbin.com/teqifogime/edit?html,css,output

В первом блоке, текст меняет цвет наряду с переходом цвета фона, потому что это наследуя его от родительского.

Цвет текста во втором блоке переходит только после того, как его родительский элемент завершил преобразование.

Это может расстраивать, когда вы собираете что-то, что использует много переходов, и кажется неожиданным поведением. Как это обойти?

HTML

<div class="block block-one"> 
    <h2>Color Test</h2> 
    </div> 
    <div class="block block-two"> 
    <h2>Color Again</h2> 
    </div> 

CSS

.block { 
    width: 200px; 
    margin: 20px auto; 
    background-color: pink; 
    text-align: center; 
    padding: 10px; 
    transition: 1s; 
} 

h2 { 
    transition: 1s; 
} 

.block-one:hover { 
    background-color: wheat; 
} 

.block-one:hover h2 { 
    color: azure; 
} 

.block-two:hover { 
    color: azure; 
    background-color: wheat; 
} 

Редактировать

Для некоторой ясности: в моей реальной ситуации у меня есть куча компонентов CSS с их собственные свойства перехода, а некоторые из них em в конечном итоге «цепляется» этим странным образом. В конце концов мне нужно сделать кучу конкретных правил, но исключения для получения того, что я чувствую, должны быть по умолчанию. Может быть, мой вопрос больше о природе CSS - если есть какая-то причина, почему вещи работают так

Answer 1

Это немного неясно, что вы просите, но я думаю, удаляя transition из .block-two «s h2 должен сделать трюк ,

У вас есть несколько вариантов:

1st

.block-one h2 { 
    transition: 1s; 
} 

второй

.block-two h2 { 
    transition: 0s; 
} 

третьего

.block-two-title { 
    transition: 0s; 
} 

четвёртую

.block-title--transition { 
    transition: 1s; 
} 

Вот второй один:

.block { 
 
    width: 200px; 
 
    margin: 20px auto; 
 
    background-color: pink; 
 
    text-align: center; 
 
    padding: 10px; 
 
    transition: 1s; 
 
} 
 

 
h2 { 
 
    transition: 1s; 
 
} 
 

 
.block-one:hover { 
 
    background-color: wheat; 
 
} 
 

 
.block-one:hover h2 { 
 
    color: azure; 
 
} 
 

 
.block-two:hover { 
 
    color: azure; 
 
    background-color: wheat; 
 
} 
 

 
.block-two h2 { 
 
    transition: 0s; 
 
}

<div class="block block-one"> 
 
    <h2 class="block-title--animated">Color Test</h2> 
 
</div> 
 
<div class="block block-two"> 
 
    <h2>Color Again</h2> 
 
</div>