Как создать псевдокасс: наведите указатель на родительский элемент?

Question

Я хочу навести одно слово в h4 и переключить цвет фона h4 и цвет фона содержащего элемента.

Вот мой HTML:

<div class="blackwrap"> 
     <header class="blackbar"> 
      <h2>Before he knew it, he couldn't see a thing.</h2> 
      <h4>He fumbled around for the <a id="flash">flashlight</a> on his phone.</h4> 
      </header> 
     </div> <!-- .blackwrap-->  

CSS:

.blackbar { 
    background: black; 
    color: white; 
} 

Я хочу #flash: парить, чтобы изменить фоновый цвет & .blackbar. Возможно ли это в этой конфигурации? Будет ли это необходимость JS/jQuery?

Answer 1

Только в случае, если вам нужен JS (JQuery) для этого:

$("#flash").on("mouseover", function(){ 
    $(".blackbar").addClass("lit"); 
}).on("mouseout", function(){ 
    $(".blackbar").removeClass("lit"); 
}); 

и CSS:

.blackbar.lit { 
    background:yellow; 
    color:black; 
} 

http://jsfiddle.net/8HJrD/