Question

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

因此存在“主页”位置和“内部”位置（如主页和内页），当用户在内页与主页上时，我需要一些链接以表现不同。所以我设置的方式，一旦点击“内部”链接，我从div 认为中删除一个类应该导致该div中的链接表现不同。但他们不表现得像我期望的那样。

这个例子非常愚蠢的页面在这里：

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

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

如果鼠标悬停在左侧的那些灰色链接（在代码中称为“气球”），您将看到它们具有悬停颜色，并显示弹出图形。我只想在页面处于“主页”位置时发生这种情况。我有一个名为“popup_yes”的类，允许这种悬停/弹出操作发生。它在加载index.html时出现，如果我删除它或在代码中更改其名称，则悬停/弹出窗口不起作用。所以我知道班级正在做点什么。现在，我点击“服务”时删除该类。我可以通过检查Chrome中的元素看到“popup_yes”实际上已被删除。但是......当鼠标悬停在气球上时，悬停/弹出动作仍会发生。

当我检查元素时，即使您可以在代码中看到“popup_yes”消失，Chrome仍在使用它。以下是Inspect Element在“home”和“inside”页面上的样子截图：

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

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

Answer 1

我修改了您正在使用的javascript并且可以使其正常工作。以下是我所做的更改。

首先，当您单击服务页面时删除了类，我指定了要删除的类。

$('#balloons').removeClass("popup_yes");

在此之后，当您单击返回主页时，必须添加该类，因此在您为$('#buttons') div设置动画后我将此行包括在内。

$("#balloons").addClass("popup_yes");

现在改变了每个气球上的悬停效果。我将向第一个气球元素显示我所做的更改，您可以为其他元素重现相同的内容。

$(".balloon_1").mouseover(function() {
   if($(this).closest('#balloons').attr("class")=="popup_yes"){
      $("#popup_1").show(400);
      $(".balloon_1").addClass("hover");
     }
 });

$(".balloon_1").mouseout(function() {
    if($(this).closest('#balloons').attr("class")=="popup_yes"){
        $("#popup_1").hide(400);
        $(".balloon_1").removeClass("hover");
     }
});

我修改的不是检查用于悬停的类，而是检查了balloon_1类，然后只有当id为balloons的最接近的元素具有类时才生成效果popup_yes。

我在chrome中尝试过它。希望它在其他浏览器中也能很好地工作。

Answer 2

问题在于鼠标悬停/输出代码

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

当页面加载时，mouseover事件绑定到该范围，因此如果在函数中添加检查，则已经建立了该操作

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

它应该按预期工作

使用javascript删除CSS类不会产生预期的结果

2 个答案: