CODEWITHSUNDEEP
jqueryhtmlcss
user5932580
user5932580

Reputation: 13

CSS hover change another div (within another seperate wrapper div)

I am trying to alter another div element with css hover. I got it working when they are under the same container. But on my site the element that has to be changed has to be under another separate wrapper div.

HTML

<div class="a">Div A</div>
<div id="box">
    <div class="c">Div C</div>
</div>

CSS

.a:hover ~ .c {
    background: #3F6;
}

#box {
}

Here's what I want to achieve... works in the first set when you hover over Div A. Does not on the second set. https://jsfiddle.net/69017jwc/

Upvotes: 1

Views: 213

Answers (2)

TheSocomj
TheSocomj

Reputation: 21

Im not too sure what you are looking to do but from what I understand you want it to highlight each different "question" sepertly. If so try this:

<div>
<div class="a">Div A</div>
<div class="b">Div B</div>
<div class="c">Div C</div>
</div>
<br /><br />
<div class="a">Div A</div>
<div class="b">Div B</div>
<div class="c">Div C</div>

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241238

In the second example, .c isn't a sibling of the .a element.

You would need to select the sibling #box element and then select the descendant .c element from there, .a:hover ~ #box .c:

Updated Example

.a:hover ~ .c,
.a:hover ~ #box .c {
    background: #3F6;
}

If the element that contains the .c element doesn't have a class or an id, then you could just use the universal selector:

.a:hover ~ * .c {
    background: #3F6;
}

Upvotes: 2

Related Questions