Bonjour,

j'ai un menu classique XHTML/CSS et j'aimerais utiliser de la transparence sur celui-ci via jQuery (qui par la suite sera agrémenter avec la méthode animate).

Le problème est que je perds mon layout sous IE (6,7 et 8) une fois ma transparence effectuée et je n'arrive pas à le rétablir via Jquery


XHTML

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="menu">
	<ul>
		<li><a href="#">Actualit&eacute;</a></li>
		<li><a href="#">Portrait</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Eco-citoyennet&eacute;</a></li>
		<li><a href="#">Evenementiel</a></li>
		<li><a href="#">Boutique</a></li>
		<li><a href="#" class="tooltip" rel="350" title="Test tooltip">Communiquer</a></li>								
	</ul>
</div>
CSS =
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
#menu {
	width: 200px;
	color: #BBB;
}
 
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}
 
#menu li {
	margin: 0;
	border-bottom: 1px dotted #f4faba;
}
 
#menu li:last-child {
	border: none;
}
 
#menu a {
	display: block;
	margin: 0;
	padding: 7px 0px 7px 25px;
	height: 100%;
}
 
#menu a:link, #menu a:visited {
	text-decoration: none;
	color: #342326;
}
 
#menu a:hover {
	background: url('../images/empty_go.gif') 3px center no-repeat;
	color: #BBB;
	background-color: #342326;	
}
jQuery =
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$('#menu a').hover(function(){
	$(this).css({
				'opacity':'0.5',
				'display':'block',
				'height':'100%'
				});
},function(){
	$(this).css({
   				'opacity':'1',
   				'display':'block',
   				'height':'100%'
    			});
});