jquery - mouseenter/mouseleave 只触发一次答案

【问题标题】：jquery - mouseenter/mouseleave only fires oncejquery - mouseenter/mouseleave 只触发一次
【发布时间】：2013-10-08 16:46:51
【问题描述】：

我有一张图像地图，我想根据您将鼠标悬停在哪个图像上来显示图像，并使主图像变暗。这是我的代码

<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 个这样的事件。当页面加载时它会起作用，而不是在那之后它们不起作用。我尝试过悬停，但这会导致图像地图闪烁并且可以正常工作。任何帮助表示赞赏！

【问题讨论】：

标签： jquery mouseenter mouseleave

【解决方案1】：

在前两个事件中，您有不一致的地方。第一个事件以

结束

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

如果要添加

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

同样在这种情况下，你应该这样写

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

secondGuy 也是如此

【讨论】：