Hovering and opacity

gnolan

I have a problem i can't work out. I want to hover over one div and have two other divs revert to 40% opacity. I think my main problem is i don't know what the syntax is to write this. Below is the relevant code:

HTML

<div id="main">
		<div id="nav_home">
			<a href="#"><span><h1>D9</h1></span></a>
		</div> <!--end of nav_home div-->
		
		<div id="nav_media">
			<a href="#"><span><h2>MEDIA</h2></span></a>
		</div> <!--end of nav_media div-->
		
		<div id="nav_gigs">
			<a href="#"><span><h2>GIGS</h2></span></a>
		</div> <!--end of nav_gigs div-->
		
	</div> <!--end of main div-->
	
	<div id="right_column">
		<div id="contact">
			<a href="#"><span><h2>CONTACT</h2></span></a>
		</div> <!--end of contact div-->
...............
...............

I want to hover over nav_home and have nav_media and nav_gigs go to 40% opacity. Likewise if i hover over nav_media i want the other two divs to go transparent and the same for nav_gigs.

I have the divs set up so that the span element in each takes up the entire area of the div - effectively making the entire area of the div into a clickable link.

I'd really appreciate some help with this.

EDIT: Got it sorted now

Fanny Cradock

It would be nice for posterity if you posted the solution.

Liam Byrne

Simple CSS will do it

#main div {
  filter:alpha(opacity=40)
  opacity:0.4;
}

#main div:hover {
  filter:alpha(opacity=100)
  opacity:1;
}

gnolan

Liam Byrne wrote: »

Simple CSS will do it

#main div {
  filter:alpha(opacity=40)
  opacity:0.4;
}

#main div:hover {
  filter:alpha(opacity=100)
  opacity:1;
}

I don't see how that would work - my three divs home, media and gigs would start off opaque and then each would be restored to full 100% opacity when i hover over it.

What i wanted was all three divs beginning with 100% opacity - then when i hover over any of home, media, gigs; the remaining two divs go to 40% opacity, while the div i'm hovering over retains its full opacity. I'm finding hard to explain with words

Fanny Cradock wrote: »

It would be nice for posterity if you posted the solution.

I got help on another forum. Here is the solution posted which is working perfectly for me.

Liam Byrne

gnolan wrote: »

What i wanted was all three divs beginning with 100% opacity - then when i hover over any of home, media, gigs; the remaining two divs go to 40% opacity, while the div i'm hovering over retains its full opacity. I'm finding hard to explain with words

There would be a bit more to it then - sorry!

If you prefix the above with the #main:hover instead of #main it might do the trick for you; that way the opacity won't kick in until you hover the menu, after which one of the elements would be "lit" anyway

shanno06

I'd use jQuery.
http://flowplayer.org/tools/index.html

Fanny Cradock

I don't see anything about hovering/ opacity there