Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Overriding the background-color in a:hover

    I'm having a CSS override property issue:

    I'm using a white text color over a black background color when a user hovers over an href link:

    Code:
    #main a:hover	{ 	
    	text-decoration:none;
    	color:#ffffff;
    	background-color:#000000;
    }
    However, within the main DIV, in another DIV, if I try and override the background-color to none when the user hovers over a link, it doesn't work. The background color is still black:

    Code:
    #main .bigcdimg a:hover { 	
    	background-color:none;
    }
    The odd thing is that if I supply a color, such as white, for the background-color in the .bigcdimg DIV above, the background-color on a hover IS white. It just doesn't seem the handle the "none" property.

    Am I missing something obvious, or is this a CSS quirk?

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    use
    Code:
    background-color: transparent;
    /* or */
    background-color: #ffffff; /* some color */
    none is not a valid value

  • Users who have thanked itsallkizza for this post:

    loamguy1 (11-04-2008)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by itsallkizza View Post
    use
    Code:
    background-color: transparent;
    /* or */
    background-color: #ffffff; /* some color */
    none is not a valid value
    Gold! That did it. Thanks much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •