CODEWITHSUNDEEP
htmlcsshover
Maanstraat
Maanstraat

Reputation: 1251

Hover the background of two elements

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.

Upvotes: 0

Views: 72

Answers (2)

dardar.moh
dardar.moh

Reputation: 6715

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

Upvotes: 1

andrei
andrei

Reputation: 2940

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

Upvotes: 2

Related Questions