Search code examples
cssmousehover

CSS hover not working properly in my menu bar

I am trying to change the background-color of a menu, while mouse-hover. But it is not working.

I have used the following CSS code:

#access a:hover{
background: -moz-linear-gradient(center top , #F99733, #E47300) repeat scroll 0 0     transparent; 
 }

Please take a look at the page CLICK HERE

Solution

  • Personally I like using a grey inset box-shadow to style my element and then I can simply swap the background colours on hover.

    HTML

    <div>
    Example
</div>

    CSS

    div
{
    border: 1px solid black;
    padding: 10px;
    font-size: 20px;
    background-color: #0ff;
            box-shadow: inset 0px -50px 75px -50px #000;
       -moz-box-shadow: inset 0px -50px 75px -50px #000;
    -webkit-box-shadow: inset 0px -50px 75px -50px #000;
}

div:hover
{
    background-color: #bff;
}

    JSFiddle

    http://jsfiddle.net/gvee/5Q5h9/