CODEWITHSUNDEEP
csshtml
Hari krishnan
Hari krishnan

Reputation: 2108

CSS hovering on elements

I have two div's

<div id="a">A</div>
<div id="b">B</div>

I am trying to make an effect that when hovering on #b the background color of #a changes. I used

CSS

#b:hover + #a{
    background: #000;
}

But it is not working.
If i use

CSS

#a:hover + #b{
    background: #000;
}

It works. Hovering on #a changes #b background color.
But I need first to work.

How to make the first one work. Why is this not working?

Upvotes: 0

Views: 89

Answers (3)

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Try using jQuery:

$("b").hover(function(){ /*hovering*/
    $("#a").css("backgroud-color", "#000");
}, function(){ /*hovering out*/
    $("#a").css("backgroud-color", "set_it_back_to_the_orignial");
});

If you want to do it with CSS then its not possible until you change your markup and get #a under #b.

Upvotes: 2

Jay Shukla
Jay Shukla

Reputation: 5826

It will not work because its meaning is different.

Select element which has id a, if it directly follows as a sibling of #b. which is not in this case.

Upvotes: 0

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

The + and ~ combinators will target siblings after the left-hand selector, so what you're trying to do in your first example is not possible with pure CSS. If #b preceded #a in your markup, then it would work.

Upvotes: 4

Related Questions