Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Hovering and opacity

  • 31-05-2011 09:11AM
    #1
    gnolan
    Registered Users, Registered Users 2 Posts: 1,504 ✭✭✭


    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


Comments

  • #2
    Fanny Cradock
    Registered Users, Registered Users 2 Posts: 10,240 ✭✭✭✭Fanny Cradock


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


  • #3
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭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;
}


  • #4
    gnolan
    Registered Users, Registered Users 2 Posts: 1,504 ✭✭✭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.


  • #5
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭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


  • #6
    shanno06
    Registered Users, Registered Users 2 Posts: 15 ✭shanno06


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


  • Advertisement
  • #7
    Fanny Cradock
    Registered Users, Registered Users 2 Posts: 10,240 ✭✭✭✭Fanny Cradock


    I don't see anything about hovering/ opacity there :confused:


Advertisement