CSS Multiple Hover

[ironside82]

Hi there,

 

I need to get this working.

 

I have a DIV which changes colour when I hover over it, Simple.

 

However when you mouse over this DIV I need another DIV with a separate style to change also.

 

Is it possible to somehow nest another style within the hover brackets so that the other DIV also changes.

 

I hope that explains it:

 

This is DIV 1 hover:

 

#sidemenu_item:hover, {
background-color:#F1F1F1;
color:#3399CC;

}

 

And

 

This is DIV 2 -

 

#sidemenu_item_home { position:relative; float:left; width:43px; height:45px; background-image:url(images/BUTTON_home_mono.png); }

 

needs to change to:

 

#sidemenu_item_home { position:relative; float:left; width:43px; height:45px; background-image:url(images/BUTTON_home_mono); }

 

When you mouse over DIV 1

 

 

 

Thanks in advance

 

James

[freelance84]

Not sure if that's is possible with CSS.

 

If you gave each an ID it would be possible with javascript.

[haku]

You can set a hover state on child elements of the hovered element. For example:

 

<div id="parent">
  <p id="child1">Child 1</p>
  <p id="child2">Child 2</p>
</div>

 

CSS:

#parent:hover
{
  font-size:1.5em;
}
#parent:hover #child1
{
  color:red;
}