Discussion :

[Freezstyle]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Loceka]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Freezstyle]

Au final j'ai réussi en utilisant 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
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>

[Loceka]

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

[Freezstyle]

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.