Fading entre deux images dans deux balises différentes
voilà mon problème:
J'ai besoin de faire un fading entre deux images pour mon menu,
Les premières images se trouvent dans des div et les secondes dans des li
voilà comment ça se présente:
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<div class="menu-fond">
<div id="m-acceuil">
<img src="/images/menus/fond-acceuil.jpg" border="0" />
</div>
<ul class="menu">
<li class="item-435">
<a href="/" ><img src="/images/menus/over-acceuil.jpg" alt="Accueil" /></a>
</li>
</ul>
</div> |
Puis le css
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.menu-fond {
width:1054px;
height:28px;
background-image:url(images/fond-menu.jpg);
position:relative;
}
.menu {
position:absolute;
top:0;
left:0;
}
.menu li{
display:none;
}
li.item-435 {
width:120px;
height:28px;
float:left;
}
div#m-acceuil {
width:120px;
height:28px;
float:left;
} |
Et voilà ce que j'ai tenté avec jquery
Code:
1
2
3
4
5
6
7
8
9
10
11
|
$(document).ready(function () {
$('div#m-acceuil').hover(function () {
var li=$('li.item-435', this);
li.fadeIn(250)
}, function (){
var li=$('li.item-435', this);
li.fadeOut(550);
});
}); |
Mais évidemment ça ne fonctionne pas.
Je suppose que le problème viens du fait qu'il ne situe pas : li.item-435
Merci d'avance du temps consacré.
