Petit souci mouseover/mouseout avec Jquery

13 oct. 2009, 17:20

Bonjour,
j'utilise pour une page jquery slideDown et slideUp qui s'execute avec une action mouseover/mouseout

Ci-dessous un petit bout du code:

Code : Tout sélectionner

<a href="page.html" onmouseover="slideDown("div1");" onmouseout="slideUp("div1");">Slide</a>;
<div id="div1" style="display:none;">Ici je met mon text</div>

Mon problème c'est lors de l'execution de l'effet, ma souri "quitte" la zone slide car ma div apparaît et du coup ça bug. Faut vraiment que je reste sur la zone sans bouger (et loin de la div).

Avez vous une solutions?

J'ai meme essayé ca:

Code : Tout sélectionner

<div onmouseover="slideDown("div1");" onmouseout="slideUp("div1");"><a href="page.html" >Slide</a>;
<div id="div1" style="display:none;">Ici je met mon text</div></div>

merci d'avance pour votre aide

13 oct. 2009, 17:25

pour un menu déroulante avec une dhtml qui s'affiche sous le libellé de mon menu voici mon code

Code : Tout sélectionner

$('.dhtml').each(function(){
		$(this).parent().hover(
				function(){
					$(this).children('.dhtml').show();
				},
				function(){
					$(this).children('.dhtml').hide();
				});
	});

J'utlise plutot show et hide et biensur hover

13 oct. 2009, 17:54

Bonjour Cobaye,
dans mon cas est ce que je peut faire ca :

Code : Tout sélectionner

<div class="dhtml" onmouseover="slideDown();" ><a href="page.html" >Slide</a>;
<div id="div1" style="display:none;">Ici je met mon text</div></div>

Code : Tout sélectionner

function slideDown(){

$('.dhtml').each(function(){
      $(this).parent().hover(
            function(){
               $(this).children('.dhtml').show();
            },
            function(){
               $(this).children('.dhtml').hide();
            });
   });

}

13 oct. 2009, 17:58

pas besoin

Code : Tout sélectionner

<div><a href="page.html" >Slide</a>;
<div id="div1" class="dhtml"  style="display:none;">Ici je met mon text</div></div>

Code : Tout sélectionner

$('.dhtml').each(function(){
      $(this).parent().hover(
            function(){
               $(this).children('.dhtml').show();
            },
            function(){
               $(this).children('.dhtml').hide();
            });
   });

}

ce que fait la fonction, elle recherche toutes les dhtml (avec la class .dhtml) puis se position sur le parent donc la le div principal et sur le hover (qui gère le mouseover et mouseout) je fait affiche ou disparaitre la div .html

13 oct. 2009, 18:07

Salut merci pour tes réponses,

j'ai écrit ca :

Code : Tout sélectionner

<html >
<head>

<title>Untitled Document</title>

<script type="text/javascript">
$('.dhtml').each(function(){
      $(this).parent().hover(
            function(){
               $(this).children('.dhtml').show();
            },
            function(){
               $(this).children('.dhtml').hide();
            });
   });
</script>
</head>

<body>
<div><a href="page.html" >Slide</a>;
<div id="div1" class="dhtml"  style="display:none;">Ici je met mon text</div></div>
</body>
</html>

Mais quand je passe ma souris y'a rien qui se passe. désolé mais j'ai encore beaucoup de mal avec Javascript. merci encore pour tes lumières

13 oct. 2009, 18:11

essaie avec :

<script type="text/javascript">

$(document).ready(function() {
$('.dhtml').each(function(){
$(this).parent().hover(
function(){
$(this).children('.dhtml').show();
},
function(){
$(this).children('.dhtml').hide();
});
});
});
</script>

ca exécutera le Js que quand la page sera chargé, car la le js se lance avant l'affichage de div

13 oct. 2009, 18:15

Super ca marche

19 oct. 2009, 13:02

Bonjour est ce que c'est possible de faire quelques choses comme ca :

Code : Tout sélectionner

<script type="text/javascript">

$(document).ready(function() {
$('.dhtml').each(function(){
$(this).parent().hover(
function(){
$(this).children('.container').children('.dhtml').show();
},
function(){
$(this).children('.container').children('.dhtml').hide();
});
});
});
</script>

car mon code html est comme ceci :

Code : Tout sélectionner

<div id="main_container">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="150px" valign="bottom" >
      <div class="container">
         <div class="titre" >
           <a href="liens.php" >LIENS</a></div>
          <div class="dhtml" style="display:none;">Ici mon text de description</div>
</div>
    </td>
  </tr>
</table>
</div>

merci pour ton aide

Petit souci mouseover/mouseout avec Jquery

Qui est en ligne