我如何制作：hover伪类影响父元素？

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：悬停改变背景＆amp; .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/