Question

这是我的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');
    });

当我将鼠标悬停在带有类＆＃34; views-row＆＃34;的元素上时在父div＆＃34;＃block-views-hot-deals-block＆＃34;我想得到当前悬停元素的位置并将其用于隐藏的div，但是，当我现在悬停时，我得到一个闪烁的div。有人可以帮我解决一下吗？

UPDATE1

当我更改值时：

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

它工作顺畅，但计算相对于文档的左侧位置，而不是我的父级div position: relative ..

Answer 1

首先，如果您想获取当前悬停元素.views-row的位置，则无需在其上减去#block-views-hot-deals-block位置。 jQuery的offset()已经返回元素相对于文档的坐标。

发生闪烁是因为当触发悬停时，您将#hover-divs设置在.views-row元素的前面或顶部，所以突然鼠标指针现在悬停在{{1}上而不再是#hover-divs了。因此移动鼠标会使其闪烁，因为悬停会一次又一次地被触发。在这里，我在这个jsfiddle上复制了这个问题：http://jsfiddle.net/yLDnt/

解决方案是在悬停时附加 .views-row #hover-divs。虽然鼠标仍将悬停.views-row，但此元素现在是#hover-divs的子元素，并且悬停事件不会再次触发。

.views-row

请参阅此jsfiddle：http://jsfiddle.net/yLDnt/1/

与此相反，我认为更好的UI和UX是在$('#hover-divs .' + $ResClass).appendTo($(this))//the current hovered element .css({display: 'block', top: $PosTop, left: $PosLeft});事件上设置相对于鼠标坐标的#hover-divs位置，因此当鼠标移动时它会移动。看看这个jsfiddle演示：http://jsfiddle.net/yLDnt/2/。

Answer 2

尝试这种方式：

    $('#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()。

获取当前Hovered元素的位置

2 个答案: