javascript - 使用 javascript 删除 CSS 类未产生预期结果

Question

我有一个存在于一页上的网站:index.html。网站上有很多内容(似乎在许多“页面”上)，但通过 javascript 和 CSS，所有信息都包含在 index.html 中。

所以存在一个“主页”位置和一个“内部”位置(如主页和内部页面)，我需要一些链接在用户位于内部页面和主页时表现不同。所以我设置它的方式是，单击“内部”链接后，我从 div 中删除一个我认为应该导致该 div 中的链接行为不同的类。但它们的行为并不如我所料。

这个例子的页面非常简单，在这里:

http://littleduck.com/ns_sample/index.html

在这个例子中，只有主页和“服务”页面。您可以在它们之间来回链接。

如果您将鼠标悬停在左侧的那些灰色链接(代码中称为“气球”)上，您将看到它们具有悬停颜色，并且会出现一个弹出图形。我只希望当页面处于“主页”位置时发生这种情况。我有一个名为“popup_yes”的类，它允许发生此悬停/弹出操作。它在加载 index.html 时出现，如果我删除它或在代码中更改它的名称，悬停/弹出窗口将不起作用。所以我知道那个类(class)正在做某事。现在，我在单击“服务”时删除了该类。通过检查 Chrome 中的元素，我可以看到“popup_yes”确实被删除了。但是...当您将鼠标悬停在气球上时，悬停/弹出操作仍然会发生。

当我检查该元素时，即使您可以在代码中看到“popup_yes”消失了，它仍然被 Chrome 使用。这是检查元素在“主页”和“内部”页面上的截图:

http://i.stack.imgur.com/p1ZP7.jpg

所以，请告诉我我的大脑哪里出轨了。当我在“服务”页面上时，如何让悬停/弹出操作不起作用？非常感谢您提供的任何帮助。

Answer 1

问题出在您的鼠标悬停/移出代码中

$(".popup_yes .balloon_1").mouseover(function() {
    $("#popup_1").show(400);
    $(".balloon_1").addClass("hover");
});

当页面加载时，鼠标悬停事件绑定(bind)到该跨度，因此如果您在函数中添加检查，则该操作已经建立

$(".popup_yes .balloon_1").mouseover(function() {
    if ($('#balloons').hasClass('popup_yes') ){ //<--here
        $("#popup_1").show(400);
        $(".balloon_1").addClass("hover");
    }
    });

它应该按预期工作