使用 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.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 悬停使用它的 .mouseover 和 .mouseleave 并为它们定义函数，它不会在加载时和加载后产生任何问题！

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


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