How do I make a :hover pseudoclass affect the parent element?

Question

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.

Here's my 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;
}

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

http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — idmean, Oct 09 '13 at 17:01

score 2 · Accepted Answer · answered Oct 09 '13 at 17:03

2

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

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

and the CSS:

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

http://jsfiddle.net/8HJrD/

answered Oct 09 '13 at 17:03

andi

6,442
1
18
43

Thank you. I'd been putting off learning JS til I felt I had a handle on HTML/CSS. I guess this is my call-to-action. – kfrncs Oct 09 '13 at 17:13
I used this code, and I'm getting an "Uncaught Reference Error" saying that $ is not defined on the anonymous function. What do I need to change? – kfrncs Oct 17 '13 at 05:45
Can you publish the page that's giving you that error? I can't tell without seeing it. – andi Oct 18 '13 at 18:30

How do I make a :hover pseudoclass affect the parent element?

1 Answers1

Linked