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

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() 和 element.height() 来创建一个鼠标位置的边界框。然后，您可以对照此边界框检查事件的 .pageX 和 .pageY 值。

正如您所说的那样，您需要一个事件来获取这些坐标，这对您不起作用，因为您需要立即获得它们。尽管如此，您是否考虑过在文档加载后通过调用 $('#some-element').trigger('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 hover 使用它的 .mouseover 和 .mouseleave 并为它们定义函数，它不会在加载和加载后产生任何问题！

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


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