Hover the background of two elements

Question

This my HTML:

<div id="orange">
    <div id="outer">
        <div id="inner">
            <h4>Title</h4>
            Text stuf and information
        </div>
    </div>
</div>

Is it possible with css when you hover the h4 that the background change of the div#orange to? I know the h4:hover #... thing but then you go deeper and deeper.

I don't want when you hover the div#orange that the h4 is changing but only when you hover the h4 that the background of the div#orange is changing.

possible duplicate of [How to style the parent element, when hovering a child element?](http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element) — CRABOLO, Jan 03 '14 at 12:30
This topic is discussed here http://stackoverflow.com/a/2000614/2851870. Based on the links in that answer, this could be possible with CSS4. — Tasos K., Jan 03 '14 at 12:31

score 2 · Answer 1 · answered Jan 03 '14 at 12:28

2

It is not possible using only css. You could use js to do it.

answered Jan 03 '14 at 12:28

andrei

2,934
2
23
36

score 1 · Accepted Answer · answered Jan 03 '14 at 13:10

You need, when someone hover in the title the background of the div orange change, so that's mean hover in child and change parent element, but there is no CSS selector for selecting a parent of a selected child.

you could do it with JavaScript, here is an example

HTML CODE

<div id="orange">
    <div id="outer">
        <div id="inner">
            <h4 id="title">Title</h4>
            Text stuf and information
        </div>
    </div>
</div>

CSS CODE

.hoverorange {
    background-color:orange;
}

JavaScript CODE

$("#title").hover(function() {
    $(this).closest("#orange").toggleClass("hoverorange")
});

here is a demo

Hover the background of two elements

2 Answers2