Jquery 获取当前悬停元素的位置

这是原始页面：

以下是我的JS代码：

    $('#block-views-hot-deals-block .views-row').hover(function() {
        var $CurClass = $(this).attr('class');
        var $ResClass = $CurClass.replace(/views-row\s(views-row-\d{1,2})\s.+/, '$1');
        var $PosTop = $(this).offset().top - $('#block-views-hot-deals-block').offset().top;
        var $PosLeft = $(this).offset().left - $('#block-views-hot-deals-block').offset().left;
        console.log($PosTop);
        $('#hover-divs .' + $ResClass).css({display: 'block', top: $PosTop, left: $PosLeft});

        // saving vars for further use
        $(this).data('resclass', $ResClass);
    }, function() {
        $('#hover-divs .' + $(this).data('resclass')).css('display', 'none');
    });

当我将鼠标悬停在父div“#block views hot deals block”中类为“views row”的元素上时，我想获得当前悬停元素的位置并将其用于隐藏div，然而，当我现在悬停时，我会得到一个闪烁的div。有人能帮我弄清楚吗

更新1

当我更改值时：

 var $PosTop = $(this).offset().top - $('#block-views-hot-deals-block .content').offset().top;
 var $PosLeft = $(this).offset().left;

---

它工作平稳，但计算相对于文档的左侧位置，而不是使用

位置：relative

计算父div。

首先，如果要获取当前悬停元素的位置

。视图行

，则无需减去

#block views hot deals block

位置。jQuery的

offset（）

已经返回元素相对于文档的坐标

闪烁发生的原因是当触发hover in时，您正在将

#hover divs

设置在

.views行

元素的前面或顶部，因此鼠标指针现在突然悬停在

#hover divs

上，而不再悬停在

.views行

上。所以移动鼠标会使它眨眼，因为“悬停”被反复发射。在这里，我在这个JSFIDLE上复制了这个问题：

解决方案是在悬停时在

.views行

中添加

#hover divs

。尽管鼠标仍将悬停在

#hover divs

上，但此元素现在是

的子元素。视图行

，悬停事件不会再次触发

$('#hover-divs .' + $ResClass).appendTo($(this))//the current hovered element
 .css({display: 'block', top: $PosTop, left: $PosLeft});

请参阅此JSFIDLE：

与此相反，我认为更好的UI和UX是在

mousemove

事件上设置相对于鼠标坐标的

#hover divs

位置，这样当鼠标移动时它就会移动。看看这个JSFIDLE演示：。

尝试以下方法：

    $('#block-views-hot-deals-block .views-row').mouseenter(function() {
        var $CurClass = $(this).attr('class');
        var $ResClass = $CurClass.replace(/views-row\s(views-row-\d{1,2})\s.+/, '$1');

        var $PosTop = $(this).offset().top - $('#block-views-hot-deals-block .content').offset().top;
        var $PosLeft = $(this).offset().left - $('#block-views-hot-deals-block .content').offset().left;
        console.log($PosLeft);

        $('#hover-divs .' + $ResClass).css({display: 'block', top: $PosTop - 25, left: $PosLeft - 28});

        // saving vars for further use
        $(this).data('resclass', $ResClass);
    });
    $('#hover-divs .views-row').mouseleave(function() {
        //$('#hover-divs .' + $(this).data('resclass')).css({display: 'none'});
        $(this).css({display: 'none'});
    });

---

使用

.mouseenter（）

和

.mouseleave（）

。

如果不尝试几件事就很难判断，但我认为如果你不设置顶部，它不会闪烁，只需设置块并向左设置即可。你错了，即使我删除顶部，它仍然闪烁感谢你的深入解释，我已经设置：。appendTo（$（this）），但是，当我现在悬停时-它在不正确的位置显示隐藏的div。您现在可以在我的网站上看到它。我认为。appendTo（$（this））在我的例子中是不正确的，因为这样它将在悬停时显示原始div，而不是隐藏的div。