jQuery - mouseover/mouseout avec plusieurs divs

J'ai un div caché imbriquée à l'intérieur d'une plus grande div et le configurer de sorte que lorsque vous passer la souris sur le plus grand div, le caché div glisse vers le bas. Sur mouseout, la div glisse en arrière. Le problème c'est que quand la souris passe sur le plus petit des div, il essaie de la remettre en place parce que le mouseout événement a été déclenché. Comment puis-je empêcher le div de se cacher de nouveau jusqu'à ce que la souris est au-dessus ni div?

html:

<div id="topbarVis" class="col1 spanall height1 wrapper">
    <div id="topbar"></div>
</div>

(les cours supplémentaires font partie d'un système modulaire de css et de définir la largeur et la hauteur, entre autres choses, de #topbarVis

css:

#topbar {
  width: 100%;
  height: 30px;
  margin-top: -25px;
  background-color: #000;
}

js:

//On Mouseover -> Show
$("#topbarVis").mouseover(function(){
  $("#topbar").animate({marginTop:0}, 300);
});
//On Mouseout -> Hide
$("#topbarVis").mouseout(function(){
  $("#topbar").animate({marginTop:-25}, 300);
});

InformationsquelleAutor We're All Scholars | 2011-02-11

5

Utilisation mouseenter/mouseleave à la place:
```
$("#topbarVis").mouseenter(function(){
  $("#topbar").animate({marginTop:0}, 300);
})
 .mouseleave(function(){
  $("#topbar").animate({marginTop:-25}, 300);
});
```
...ou tout simplement utiliser le hover()^(docs) méthode qui est un raccourci pour mouseenter/mouseleave:
```
$("#topbarVis").hover(function(){
  $("#topbar").animate({marginTop:0}, 300);
},function(){
  $("#topbar").animate({marginTop:-25}, 300);
});
```
La raison en est que la nature de mouseover/mouseout est tel qu'il bulles. Pour qu'il se déclenche lorsque tous les descendants de l'élément obtenez les événements. Alors que mouseenter/mouseleave ne pas bulle.

Le seul navigateur qui fait prend en charge les non-standard mouseenter/mouseleave événements est IE, mais jQuery réplique son comportement.
- quelle est la différence ici? J'ai eu le même comportement avec mouseenter / mouseleave
- Vous ne devriez pas obtenir ce comportement. Le mosueenter/mouseleave ne devrait le feu de l'élément auquel il est réellement attaché. Pas de ses descendants.
- href="http://jsfiddle.net/P9jeN/" >Voici un exemple. Lorsque vous placez le carré extérieur, l'événement se déclenche. Mais pas à l'intérieur. Si vous basculez au passage de la souris/mouseout, il mettra le feu à l'intérieur ainsi.
- oh, wow. Qu'est-ce que cela ? L'inversion de la bulle ?
- Nope, juste régulière bouillonnement de descendant de l'élément qui a le gestionnaire. Il semble un peu étrange parce que quand vous passez le carré intérieur, il déclenche un mouseout parce que vous êtes techniquement quitter le carré extérieur. C'est-à-dire que vous quittez la partie qui n'est pas obscurci par son descendant. L'IE mouseenter/mouseleave système semble faire beaucoup plus de sens, mais elle ne fait pas partie de la spécification. :o(
InformationsquelleAutor user113716

Cela fonctionne pour moi sur internet explorer. Espérons que cela aide.

$("#topbarVis").hover(function(){   $("#topbar").animate({height:"100%"}, 300); },function(){   $("#topbar").animate({height:"0%"}, 300); });

À l'aide de ce que le CSS.

#topbar {   width: 100%;   height:0px;   background-color: #000; }

InformationsquelleAutor Matthew Davis

Vous devez vous connecter pour publier un commentaire.