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

Question

我希望在网页加载时检测鼠标是否悬停在元素上。看起来这在jQuery中不可能实现- mouseover，hover等需要鼠标移动；获取当前鼠标位置（以与元素边界进行比较）也是如此。

我没有看到过这个具体的问题，但我已经看到人们说这些各种小细节都不可能实现...

- Ian Grainger

Answer 1

我的解决方案是：使用:hover伪类添加一个新的CSS值，然后测试它。然而，这似乎有时候只能起到部分作用。

CSS:

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

jQuery：

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

- Ian Grainger

---

这个方案适用的情况比大多数解决方案都要多，也就是说几乎从不出错，所以我认为这是你最好的选择。恶作剧网站过去确实使用了伪选择器来确定你访问过哪些网站，所以看到它有一个合法的用途还是很好的。 - shelhamer

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'})

通过更多的测试，我发现有时如果鼠标在移动，它并没有总是检测到悬停状态，因此我添加了一个备选方案来检测鼠标是否移动到了这个元素上：

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

- TriumphST

---

刚试着写了一个JSFiddle来测试一下（http://jsfiddle.net/FB8se/4/），但是在JSFiddle中好像存在事件顺序的问题——因为它会在尝试检测浮动元素之后才加载元素，所以我转到了JSBin并使用了实时预览，但它似乎对我不起作用：http://jsbin.com/uGUYeQA/1。 - Ian Grainger

@IanGrainger 我无法了解JSFiddle的内部工作原理，但在实际应用中它对我是有效的。 - TriumphST

那jsbin呢？它能用吗？如果不能，我做错了什么？ - Ian Grainger

Answer 3

为什么不呢！:)

这是我的一个解决方案：

演示

来自演示的代码：

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

- Roko C. Buljan

Answer 4

编辑：经过测试，我得出结论，这种方法行不通。省点时间，试试其他方法吧。

我认为你实际上可以让元素边界框起作用。

这是一种有点取巧的方法，但策略是使用element.offset()获取元素相对于文档的坐标，以及element.width()和element.height()来创建鼠标位置的边界框。然后，您可以将事件的.pageX和.pageY值与此边界框进行比较。

正如您所说，您需要一个事件来获取这些坐标，但这对您不起作用，因为您希望立即获得它们。尽管如此，您是否考虑通过在文档加载后调用$('#some-element').trigger('click')来模拟鼠标单击事件？您可以先通过$('#some-element).click()注册一个函数来检查边界框并查看它的效果。

- shelhamer

---

$('#some-element').trigger('click') 会给出当前鼠标坐标吗？还是一些错误的、伪造的鼠标坐标？ - Ian Grainger

经过一些测试，似乎在大多数情况下，我的疯狂想法通常不会生成坐标。由于trigger()触发的事件似乎没有填充pageX和pageY的值。 - shelhamer

Answer 5

我发现世界上可能最简单的方法！ 忘记JQ hover，使用它的.mouseover和.mouseleave，并为两者定义函数，在加载和加载后都不会出现任何问题！

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


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

- ThisIsWilliam

---

但正如我在帖子中所说的，我已经在运行一个函数，我想知道鼠标指向的是什么。不要等到鼠标移动到某个位置，那很容易！ - Ian Grainger