如何使a：hover伪类影响父元素？ [英] How do I make a :hover pseudoclass affect the parent element?

问题描述

我想在h4中悬停一个单词，并切换h4的背景颜色和包含元素的背景颜色。

I want to hover a single word in an h4, and have it switch the background color of the h4 and the color of the background of the containing element.

这是我的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？

I want #flash:hover to change the background & color of .blackbar. Is this possible in this configuration? Will this need JS / jQuery?

推荐答案

只是为了你需要JS（jQuery）：

Just in case you need the JS (jQuery) for this:

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

和CSS：

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

http://jsfiddle.net/8HJrD/

这篇关于如何使a：hover伪类影响父元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！