Modification du css sur un onmouseover

Version imprimable

Bonjour � tous,

Je souhaiterais faire afficher une liste sur un onMouseOver d'une balise <h2> et la masquer sur le onMouseOut.

Voici mon code html :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="languages"> <h2>Languages</h2> <div class="content"> <ul> <li><a href="#">English</a></li> <li><a href="#">Français</a></li> <li><a href="#">Deutsh</a></li> </ul> </div> </div>
La liste � afficher/masquer est dans le <ul>.

J'ai test� d'interagir avec la div #languages gr�ce � deux boutons et �a fonctionne tres bien.
Code:

1 2 3 <input type="button" value="Show" onclick="javascript:document.getElementById('languages').style.display='block';" /> <input type="button" value="Hide" onmouseover="javascript:document.getElementById('languages').style.display='none';" />
Sauf que ces boutons masquent toute la div or je voudrais qu'ils masquent uniquement le <ul>. Et pour finir, l'id�al serais que cet effet se fasse sur un rollover de la balise <h2>.

J'espere avoir �t� clair.
Merci d'avance pour votre aide.

Il suffit de mettre l'ID sur la liste ou le div contenant la liste et de mettre l'action javascript sur le h2 :

Code:

1
2
3
4
5
6
7
8
9
10
<div id="languages">
      <h2 onmouseover="document.getElementById('languages_list').style.display='block';" onmouseout="document.getElementById('languages_list').style.display='none';">Languages</h2>
      <div id="languages_list" class="content">
            <ul>
                   <li><a href="#">English</a></li>
                   <li><a href="#">Français</a></li>
                   <li><a href="#">Deutsh</a></li>
            </ul>
       </div>
</div>

Au final j'ai r�ussi en utilisant JQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type="text/javascript">
   $("#languages h2").hover(function(){
	$("ul").slideDown("fast",function(){
		$("ul").css("display","block");
	});
    });
 
   $("#languages ul").hover(function(){
	$("#languages ul").slideDown("fast",function(){
		$("#languages ul").css("display","block");
	});
	},function(){
		$("#languages ul").slideUp("fast",function(){
			$("#languages ul").css("display","none");
		});
	});
</script>

15/02/2011, 16h15
Loceka

As-tu test� ce que j'avais marqu� au moins ? :?
16/02/2011, 11h47
Freezstyle

Citation:

Envoy� par Loceka

As-tu test� ce que j'avais marqu� au moins ? :?

Non je n'ai pas test�. Pour deux raisons :
1 - Le contenu de la div #languages est g�n�r� par DRUPAL. Du coup j'aurais d� aller chercher comment lui affecter une classe dans sa g�n�ration.

2 - Je manquais de temps donc je n'ai pas voulu en prendre pour trifouiller dans le "moulinage" de DRUPAL.

En tout cas je te remercie de ton aide. :ccool: