#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    Cheltenham, UK
    Posts
    241
    Rep Power
    19

    Kill transparency on hover


    Hi There,

    I am coding a design that has a semi transparent menu that uses this:

    Code:
    #mainnav {
    	float: right;
    	background: #fafafa;
    	filter:alpha(opacity=65); /* IE Proprietary */ 
    	opacity: 0.65; /* CSS3 Standard */ 
    	-moz-opacity:0.65; /* Mozilla Property */
    	height:31px;
    	font-size: 1.1em;
    }
    When I add hover to any of the navigation items that fall within this parent div the transparency is maintained. I need the hover to be solid color, not semi transparent. Is there anyway to kill the transparency on hover?

    I have tried adding an 'a:hover' with the maximum opacity (0.99) to #mainnav and also independently to the child elements with no success eg:

    Code:
    .nav-list-items a:hover {
    	display: table-cell;
    	height: 31px;
    	vertical-align: middle;
    	background-color: #ec7404;
    	color: #fff;
    	filter:alpha(opacity=99); /* IE Proprietary */ 
    	opacity: 0.99; /* CSS3 Standard */ 
    	-moz-opacity:0.99; /* Mozilla Property */
    }
    Any pointers would be greatly appreciated.

    Thank you!
    beardo ;0)
    -------------------------------
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1228
    You can use png background-image instead of opacity, png support rgba.

    The childs opacity is based on the parent element so opacity .99 would give you .64

    In the future you can use rgba in css as an alternative to opacity
    http://www.w3.org/TR/css3-color/#rgba-color
    http://www.css3.info/preview/rgba/
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    Cheltenham, UK
    Posts
    241
    Rep Power
    19
    Originally Posted by Akh
    You can use png background-image instead of opacity, png support rgba.

    The childs opacity is based on the parent element so opacity .99 would give you .64

    In the future you can use rgba in css as an alternative to opacity
    http://www.w3.org/TR/css3-color/#rgba-color
    http://www.css3.info/preview/rgba/
    Thank you akh, I wanted to avoid images if I could, but if the client insists on losing the transparancy on the hover I will try png.

    Thanks again!
    beardo ;0)
    -------------------------------
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    56
    Rep Power
    9
    Would it be possible to place the initial transparency on the links themselves instead of their container? If you could do that, then changing the opacity on hover would work fine.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    Cheltenham, UK
    Posts
    241
    Rep Power
    19
    Would it be possible to place the initial transparency on the links themselves instead of their container? If you could do that, then changing the opacity on hover would work fine.
    Well, maybe but because of margins and the fact that it is a 3 part menu it makes life a lot harder and also means more markup.

    The png solution means that I can use one image on the parent div to cover all 3 parts of the menu.

    Thank you for the suggestion though!
    beardo ;0)
    -------------------------------

IMN logo majestic logo threadwatch logo seochat tools logo