使用jQuery检测页面加载时的鼠标hover
我想在网页加载时检测鼠标是否在元素上。 看来这是不可能的jQuery – 鼠标hover，hover等需要鼠标移动; 获取当前鼠标位置（与元素边界进行比较）。
我没有看到这个具体的问题，但是看到人们说这不可能有各种各样的问题……
我的解决方案：使用hover伪选择器添加一个新的CSS值，然后测试它。 然而，这似乎只是有效。
CSS：
#el:hover {background-color: transparent; } jQuery的：
if ($('#el').css('background-color') == 'transparent')
这是我解决它的方式：
/** 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'})
随着更多测试，我注意到有时，如果鼠标移动，它并不总是检测到hover，所以我在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) } }); } }
编辑：经过测试，我得出结论，这将无法正常工作。 节省时间，尝试别的东西。
我认为你实际上可以使元素边界框工作。
这有点像黑客，但策略是使用element.offset（）来获取元素相对于文档的坐标，以及element.width（）和element.height（）来创建一个边界框鼠标位置。 然后，您可以针对此边界框检查事件的.pageX和.pageY值。
正如您所说，您需要一个事件来获取这些坐标，这对您来说不起作用，因为您需要它们。 但是，您是否考虑过在文档加载后调用$（’＃some-element’）触发器（’click’）来伪造鼠标单击事件？ 您可以预先注册一个函数来通过$（’＃some-element）.click（）检查边界框，看看它的作用。
为什么不！ 🙂
这是我的解决方案：
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);