hover parent change child of child

Question

В следующем примере я хочу, чтобы что-то случилось с моими дочерними div, когда я наводил курсор на полный родительский div. Например: я хочу, чтобы h2 и span child1 подчеркивали, а диапазон child2 изменялся от цвета (но не подчеркивал!).

Возможно ли это с чистым css? Или я должен использовать JQuery? Если да, не могли бы вы помочь мне начать работу с этим в JQuery?

  <div class="parent"> 
       <a href="#"> 
        <div class="child1"> 
         <h2>text</h2> 
         <span>text</span> 
        </div> 
        <div class="child2"> 
         <span>text</span> 
        </div> 
       </a> 
      </div> 

Answer 1

Это возможно с помощью CSS, как вы можете ориентировать детей на наведен родителя:

.parent:hover .child1 span, .parent:hover .child1 h2 {text-decoration: underline;} 
.parent:hover .child2 span {color: red;} 

FIDDLE