jquery - mouseenter/mouseleave только срабатывает один раз

Question

У меня есть карта изображения, в которой я хочу показывать изображения, на основе которых вы зависали и сглаживали основное изображение. Это код, который у меня есть

<script> 
$(document).ready(function() { 

$(".firstGuyOne",".secondGuyOne").hide(); 

$(".firstGuy").mouseenter(function (e) { 
    $(".jetGroup").addClass("activeTeam");}); 
    $(".firstGuyOne").addClass("visibleTeam"); 

$(".firstGuy").mouseleave(function (e) { 
    $(".jetGroup").removeClass ("activeTeam"); 
    $(".firstGuyOne").removeClass("visibleTeam"); 
    } 
).click(function(e) { e.preventDefault(); }); 

$(".secondGuy").mouseenter(function (e) { 
    $(".jetGroup").addClass("activeTeam");}); 
    $(".secondGuyOne").addClass("visibleTeam"); 

$(".secondGuy").mouseleave(function (e) { 
    $(".jetGroup").removeClass ("activeTeam"); 
    $(".secondGuyOne").removeClass("visibleTeam"); 
    } 
).click(function(e) { e.preventDefault(); }); 

}); 
</script> 

Это только увольнение по какой-то причине. У меня будет около 5-6 из этих событий. Он будет работать, когда страница загружается, чем после этого. Я попытался навести курсор, но это вызывает мерцание на карте изображения и работает правильно. Любая помощь приветствуется!

Answer 1

В первых двух случаях у вас непоследовательность. Первое событие заканчивается

$(".jetGroup").addClass("activeTeam"); 

Если вы хотите добавить

$(".firstGuyOne").addClass("visibleTeam"); 

также в этом случае, вы должны написать, как это

$(".firstGuy").mouseenter(function (e) { 
$(".jetGroup").addClass("activeTeam"); 
$(".firstGuyOne").addClass("visibleTeam"); 
}); 

То же самое с secondGuy