Page 1 sur 1
Petit souci mouseover/mouseout avec Jquery
Posté : 13 oct. 2009, 17:20
par moileraz
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
Re: Petit souci mouseover/mouseout avec Jquery
Posté : 13 oct. 2009, 17:25
par Cobaye
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
Re: Petit souci mouseover/mouseout avec Jquery
Posté : 13 oct. 2009, 17:54
par moileraz
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();
});
});
}
Re: Petit souci mouseover/mouseout avec Jquery
Posté : 13 oct. 2009, 17:58
par Cobaye
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
Re: Petit souci mouseover/mouseout avec Jquery
Posté : 13 oct. 2009, 18:07
par moileraz
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
Re: Petit souci mouseover/mouseout avec Jquery
Posté : 13 oct. 2009, 18:11
par Cobaye
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
Re: Petit souci mouseover/mouseout avec Jquery
Posté : 13 oct. 2009, 18:15
par moileraz
Super ca marche
Re: Petit souci mouseover/mouseout avec Jquery
Posté : 19 oct. 2009, 13:02
par moileraz
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