2

我有一个存在于一个页面上的网站：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 在“主页”和“内部”页面上的截图：

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

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

4

2 回答 2

0

我已经修改了您正在使用的 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具有 class时才产生效果popup_yes。

我在chrome中试过了。希望它在其他浏览器中也能正常工作。

于 2012-11-20T18:30:08.130 回答
0

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

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

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

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

它应该按预期工作

于 2012-11-20T18:35:50.760 回答