Discussion :

[boutmos]

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%'
    			});
});

[pcleder]

Internet Explorer ne gère pas l'attribut opacity.
Il faut utiliser l'attribut filter:alpha(opacity=50) par exemple pour une transparence de 0.5 sur Firefox.

[CCyrillus]

bonsoir,

un exemple en ligne permettrait de voir ce qu'il se passe réellement . que fait jquery et quel element/script de jquery as tu chargé ?

applique tu un autre filtre a l'un des parent (pour la transparence png par exemple).

mode quirk ou standard pour le rendu ?
Dans IE8 , F12 et les Outils de Develloppement s'affiche , il t'indique alors dans quel rendu est IE .
mode navigateur: 7 , 8 ou compatibilité
et
mode document : Quirks , IE 7 , IE8
entre autres

Enfin , jquery n'est pas justifié pour appliquer une simple opacité css sur une balise <a> a l'evenemnt hover. pour onclick ou onblur , oki . et la tu aurais peut-etre plutôt interêt a ajouter/enlever une class . Il te seras plus facile alors de gerer IE (CC) et les autres , modifier tes styles, ... .

GC