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?
You cannot do fade on the background image.
Possible solution is to use a div positioned absolutely for li tag. ie:
<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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.