html - 如何使 :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:hover 更改 .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/