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

时间:2011-07-05 16:56:38

标签: jquery hover mouseover

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

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

5 个答案:

答案 0 :(得分:12)

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

CSS:

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

jQuery的:

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

答案 1 :(得分:1)

以下是我解决它的方法:

/** 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)
            }
        });
    }
}

答案 2 :(得分:0)

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

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

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

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

答案 3 :(得分:0)

为什么不呢! :)

这是我的解决方案:

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);

答案 4 :(得分:0)

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

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


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