Question

在Safari Version 7.0.1和IE8中会发生以下情况。

问题：在关闭弹出菜单后，行的悬停状态仍然存在，无论鼠标在哪里，它都不会消失，直到你再次将鼠标悬停在它上面。

预期的行为是什么？在解除弹出菜单后，行的悬停状态应该消失。

有人知道Safari 7.0.1和IE8的修复程序吗？我会用一些手动方式来“解开”css悬停状态。

Answer 1

这是一种解决方法 - http://jsfiddle.net/3BUaT/11/。经过许多stackoverflow帖子后，了解到无法从javascript中删除css伪类。所以绝对有必要解决这个问题。

我正在使用

tr.hovered td {
  background-color: lightblue;
}

而不是常规的CSS悬停状态。

问题是当你点击菜单中的li时，它并不是在safari中从CSS触发mouseout事件。从技术上讲，你实际上并没有将鼠标从元素中取出。只是元素被删除了。这似乎是野生动物园中的一个错误。

Answer 2

这是一个有待解决的问题。虽然解决方案有点hacky，但它确实有效。将HTML设置为“boo”后，我们克隆整行，插入它，然后删除旧行：

$(function() {
  $("table").on("click", "td", function() {
    $("#menu")
        .clone()
        .one("click", function() {
              var $td = $(this).closest("td"),
                  $tr = $td.parent();

              $td.html("boo");
              $tr.clone(/* true */).insertAfter($tr);
              $tr.remove();
              return false;
        })
        .appendTo(this)
        .show();
  });
});

http://jsfiddle.net/ryanwheale/3BUaT/26/

Answer 3

您正在使用您的函数将div #menu附加到td。现在，当鼠标悬停在td或附加菜单上时，CSS将把悬停状态应用于td。将鼠标悬停在菜单上会应用tr：hover td css，因为菜单现在是td的一部分。

Answer 4

好的，所以这是我提出的解决方案，它将我的评论中的要点（关于Tejas Jayasheel的答案）考虑在内：JSFiddle

区别在于：

#menu未克隆，未添加到表格单元格中，而是重新定位（因此元素也只显示一次）
CSS hover仅在HTML元素中存在'no-js'类时才需要应用（需要在原始文件中添加）
否则通过将“clicked”类应用于单元格来实现悬停效果
另外当菜单已经可见时，通过切换所有TD上的另一个类来“禁用”悬停效果
点击已经“点击”单元格的菜单外部将关闭/隐藏菜单，无需任何进一步操作

.no-js td:hover, td.hover-enabled:hover, td.clicked { background-color: lightblue; }

预期的行为是什么？在解除弹出菜单后，行的悬停状态应该消失。

也许......！但请记住，通过从DOM中删除悬停元素，您会严重“混淆”浏览器。我猜Safari和IE 8只是“不承认”，以前的悬停部分不再徘徊。这可能是也可能不是“错误”。但至少它是“糟糕的做法/写作风格”，应该简单地避免！

有人知道Safari 7.0.1和IE8的修复程序吗？我会用一些手动方式来“解开”css悬停状态。

我的例子中显示了“修复”。在脚本和悬停时添加，删除或切换类是一种常见的建议。通过这样做，你可以完全避免“问题”。因为即使在任何浏览器的未来版本中，这种情况下的行为充其量也是“不可预测的”。

Answer 5

它不是浏览器的错。是你的。您将菜单列表附加到行。因此菜单列表是该行的子项。因此，如果您将鼠标悬停在子级上，则父级也将处于悬停状态。

我已经更新了你的jsfiddle：

Jsfiddle;

$(function() {
  $("td").on("click", function() {
    $("#menu")
        .clone()
        .one("click", function() {
          // this is key to reproduce it.
          $(this).closest("td").html("boo");
          return false;
        })
        .appendTo($(this).parent().parent().last())
        .show();
  });
});

鼠标不再悬停后，CSS悬停样式仍然存在

5 个答案: