CODEWITHSUNDEEP
css
Johnny Blade
Johnny Blade

Reputation: 27

Hover effects dont work

Hover effects don't work when I'm trying to make one element do something while hovering over another, as it is shown here:

<html>
<head>
<title>111</title>
<style type="text/css">
#aa {height: 500px; width:500px; background-color: blue; float: left;}
#bb {height: 500px; width:500px; background-color: red; float: left;}
#bb:hover #aa {background-color: green;}
</style>
</head>
<body>
<div id="aa"></div>
<div id="bb"></div>
</body>
</html>`

Can you tell me what I am doing wrong? Thank you!

Upvotes: 2

Views: 155

Answers (3)

Lupin
Lupin

Reputation: 1244

As my previous answer was wrong and did not reaaly answer your question, i have updated my response. I believe the best solution would be in JS similiar to Sachin suggestion. However just to not that in CSS3 there is a General Sibling Selector.

When using it in your case, we will be able to change a color of div #bb when hovering on div #a (not exactly as your example), i also agree with the others that for previous selector JS will be the way.

#aa:hover ~ #bb {
   color:red;
}

Hope this helps.

Upvotes: 0

Sachin
Sachin

Reputation: 40970

Actually there is no previous sibling selector. So only this will work

#aa:hover + #bb   {background-color: green;}

But don't worry you can use JS or jQuery to solve this problem. Here is one simple solution using jQuery would be this

$('#bb').hover(function(){
    $(this).prev('#aa').css("background-color","green");
},function(){
    $(this).prev('#aa').css("background-color","blue");
});

Look at the demo which contains css sibling selector as well as jquery solution for selecting previous siblings.

Js Fiddle Demo

Upvotes: 1

Ne Ma
Ne Ma

Reputation: 1709

Edit: Sachin raises a very valid point. Did some testing and read around to confirm and http://dev.w3.org/csswg/selectors4/#subject suggests that the selectors to do this are rediculously bleeding age :D

#bb:hover + #aa { } // Wont work
#aa:hover + #bb { } // Will work but within the scope of OPs question, useless.

Best solution would be to utilise JS and mouseover make the change.

Upvotes: 3

Related Questions