Question

我想在网页加载时检测鼠标是否在元素上。看来这是不可能的jQuery - 鼠标悬停，悬停等需要鼠标移动;获取当前鼠标位置（与元素边界进行比较）。

我没有看到这个具体的问题，但是看到有人说过这个问题的各个方面是不可能的......

Answer 1

我的解决方案：使用悬停伪选择器添加新的CSS值，然后对其进行测试。然而，这似乎只是有效。

CSS：

#el:hover {background-color: transparent; }

jQuery的：

if ($('#el').css('background-color') == 'transparent')

Answer 2

以下是我解决它的方法：

/** detect if the mouse was hovering over and element when the page loaded */
function detectHoverOnLoad(options) {
    var sel = options.selector

    if ($(sel + ':hover').length) {
        console.log('loaded while HOVERING over ' + sel)
    } else {
        console.log('loaded, but NOT hovering over ' + sel)
    }
}

然后我这样称呼它：

detectHoverOnLoad({selector: '#headerNav'})

随着更多的测试，我注意到有时，如果鼠标移动，它并不总是检测到悬停，所以我在else中添加了一个后退来检测鼠标在元素上移动：

function detectHoverOnLoad(options) {
    var sel = options.selector

    if ($(sel + ':hover').length) {
        console.log('loaded while HOVERING over ' + sel)
    } else {
        console.log('NOT hovering')
        $(sel).one('mousemove', function (e) {
            if ($(e.target).parents(sel).length) {
                console.log('MOUSEMOVEed over ' + sel)
            }
        });
    }
}

Answer 3

编辑：经过测试，我得出结论，这是行不通的。节省时间并尝试其他方法。

我认为你实际上可以使元素边界框工作。

这有点像黑客，但策略是使用element.offset（）来获取元素相对于文档的坐标，以及element.width（）＆amp; element.height（）创建鼠标位置的边界框。然后，您可以针对此边界框检查事件的.pageX和.pageY值。

正如您所说，您需要一个事件来获取这些坐标，这对您来说不起作用，因为您需要立即使用它们。但是，您是否考虑过在文档加载后调用$（'＃some-element'）触发器（'click'）来伪造鼠标单击事件？您可以预先注册一个函数来通过$（'＃some-element）.click（）检查边界框，看看它是做什么的。

Answer 4

为什么不呢！：）

这是我的解决方案：

DEMO

演示代码：

function handler(ev) {
    var target = $(ev.target);
    var elId = target.attr('id');
    if( target.is(".el") ) {
       alert('The mouse was over'+ elId );
    }
}
$(".el").mouseleave(handler);

Answer 5

我发现了世界上最简单的方法！忘了JQ悬停使用它的.mouseover和.mouseleave并为它们两者定义函数，在加载时和加载后都没有任何问题！

   $('li').mouseover(function () {
       codes
   } 


   $('li').mouseleave(function () {
       codes
   }

使用jQuery检测页面加载时的鼠标悬停

5 个答案:

DEMO