Comment empêchez-vous le passage du curseur d'un parent lors du survol de son élément enfant?

Question

Alors disons que j'ai une image en carré rouge qui devient verte quand la souris passe dessus, et elle redevient rouge lorsque la souris quitte le carré. J'ai ensuite fait une sorte de menu avec elle de sorte que lorsque je plane sur le carré, il devient vert et un rectangle apparaît en dessous. Ce que je veux arriver est la suivante: Après que le rectangle apparaisse et que je déplace la souris hors du carré et sur le rectangle, je veux que le carré reste vert jusqu'à ce que je déplace la souris hors du rectangle.

Comment faire ceci avec jquery? Le code est-je utiliser quelque chose comme ceci:

$('.square').hover(function() { 
    $(this).addClass('.green'); 
    }, function() { 
    $(this).addClass('.red'); 
}); 
$('.square').hover(function() { 
    $(this).children('.rectangle').show(); 
    }, function() { 
    $(this).children('.rectangle').hide(); 
}); 

Answer 1

Si le menu est à l'intérieur de la place, vous pouvez essayer quelque chose comme ceci:

$('.square').bind("mouseenter",function(){ 
    $(this).addClass('green'); 
    $('.rectangle').show(); 
}); 

$('.square').bind("mouseleave",function(){ 
    $(this).addClass('red'); 
    $('.rectangle').hide(); 
}); 

Answer 2

Vous avez quelques erreurs dans votre code.

1. Vous ne supprimez jamais les classes, vous essayez seulement d'ajouter des classes. Cela ne fonctionnera qu'une seule fois, et toutes les tentatives suivantes ne feront rien car jQuery n'ajoutera pas deux fois la même classe au même élément.
2. Vous ne devez pas utiliser la syntaxe point lors de l'ajout de classes. Il suffit de fournir le nom de classe par lui-même:

jQuery:

$('.square').hover(function() { 
    $(this).addClass('green'); 
    $(this).children('.rectangle').show(); 
}, function() { 
    $(this).removeClass('green'); 
    $(this).children('.rectangle').hide(); 
}); 

CSS:

/* Make sure .green comes after .red */ 
.red { background: red } 
.green { background: green } 

Answer 3

J'ai récemment eu le même problème. Ce que j'ai fait était d'ajouter un événement mouseenter à l'élément "enfant" aussi, alors qu'en passant de parent à enfant, il n'est pas désactivé. Fondamentalement, j'ai mouseenter et mouseleave sur les deux éléments (qui, bien sûr, se chevauchent légèrement pour que cela fonctionne).