jQuery $('.class').is(":hover") 在 Firefox 中需要超时才能返回 true答案

【问题标题】：jQuery $('.class').is(":hover") needs a timeout in Firefox to return truejQuery $('.class').is(":hover") 在 Firefox 中需要超时才能返回 true
【发布时间】：2015-04-11 17:48:23
【问题描述】：

我为 svg 圆圈设置了 mouseout 事件。

在鼠标悬停时，会进行一些测试以查看是否悬停了工具提示或背景层。如果他们悬停在那里，提示会保持向上；如果他们不这样做，它就会被带走。

提示有一个 div（没有背景），延伸到圆圈周围的区域。代码是：

                var isHoveredTip = $('.tipcontainer').is(":hover");
                var isHoveredOverlay = $('.mouseOverlay').is(":hover");

                //test if the user is mousing over the tip area
                if (isHoveredOverlay == true || isHoveredTip == true) {

                   //if the user is hovering the tip, take away the tip once they leave the tip area
                  $(".tipcontainer").on('mouseleave',function() {
                    d3.select(that).attr("r",(pointRadius) + "px");
                    tooltip.style("visibility","hidden").style("transition","visibility .0s linear .0s,opacity 0s linear");
                    d3.selectAll(".tipChart").remove();
                  });
                }
                 // take away the tip if they're not hovering
                else {

                  d3.select(that).attr("r",(pointRadius) + "px");
                  tooltip.style("visibility","hidden").style("transition","visibility .15s linear .15s,opacity 0s linear");
                  d3.selectAll(".tipChart").transition().duration(300).remove();
                }

Chrome 中的一切都是肉汁。 Firefox 给我带来了问题。 isHoveredTip 和 isHoveredOverlay 变量只有在我将超时设置为几毫秒时才返回 true。就好像元素没有在圆的 mouseout 上呈现。如果我确实设置了该时间，则会产生附带问题，代码需要条件来判断是否将鼠标悬停在其他圆圈上，这会创建一个代码链。

如何让 Firefox 在不超时的情况下注册悬停事件？

【问题讨论】：

d3 和 jQuery 是不是要混用。
不同意你的看法。它们服务于不同的用例。
@In_code_veritas：你完全正确！因此，您应该创建基于 d3 的类/库。不同库调用的混合极大地增加了错误的数量！
这取决于项目范围和需求。但感谢您的意见，这是个好主意。

标签： jquery svg d3.js settimeout jquery-hover

【解决方案1】：

我通过使用d3.mouse(this) 解决了这个问题，并且只是测试鼠标是否在工具提示的方向（负 y 方向）移动。 jQuery 和 svg 在悬停事件中表现不佳。

              var coordinates = [0, 0];
              coordinates = d3.mouse(this);
              var x = coordinates[0];
              var y = coordinates[1];

              var testTip = function () {

                if (coordinates[1] < 0) { 
                    // do stuff
             }}

无论如何，这似乎更像是一种处理此问题的 D3 方式。

【讨论】：