Question

I Want to change the background of a Div when Hovering over another Div and i tried

HTML5 part:

<nav>
<div id="nav1"></div>
<a href="#"><div id="nav2"></div></a>
<a href="#"><div id="nav3"></div></a>
<a href="#"><div id="nav4"></div></a>
<a href="#"><div id="nav5"></div></a>
<a href="#"><div id="nav6"></div></a>
<div id="nav7"></div>
</nav>
<article>
<div id="nav8"></div>
</article>

And the CSS i tried is

#nav2
{
float:left;
height:429px;
width:34px;
background:url(images/nav_02.gif) no-repeat;
}
#nav2:hover #nav8
{
float:left;
height:429px;
width:445px;
background:url(images/nav_08-nav_02_over.jpg) no-repeat;
}

But it is not working …
I need to do it with css only no javascript ..

Answer 1

The way CSS selectors works is Parent > Descendant

When you do

#nav2:hover #nav8

It means that #nav8 is a descendant of #nav2, which is not the case in your markup, so the rule does not apply

You have to use javascript to do what you’re after.