Question

i have a navigation menu and i am using the hover element to change the image when an hover event occur. i am using the following CSS

#navigation li.contact a:hover {
    margin-left:1px;
    background: url('../img/hover.jpg') no-repeat;
    float:left;
    width:147px;
    height:109px;
}

my navigation menu is composed of a pattern stretched using repeat-x properties of css. the above code works perfectly fine. now i want to apply a fadein and fadeout effect on the image that i am using for hover. how do i do it?

Answer 1

You cannot do fade on the background image.

Possible solution is to use a div positioned absolutely for li tag. i.e.:

<ul id="navigation">
   <li class="contact">
      <div class="background"></div>
      <a href="">some menu</a>
   </li>
</ul>

The css should be like:

#navigation li{position: relative;}
#navigation .background{position: absolute; top:0px; left: 0px; opacity: 0;}

This way you can say:

$('#navigation').find('li').hover(function(){
   $(this).find('.background').fadein();
}, function(){
   $(this).find('.background').fadeOut();
})

The problem came if you want to position your li elements absolutely some how. I haven’t tested it, but this way it should work.