我想在网页加载时检测鼠标是否在元素上。看来这是不可能的jQuery - 鼠标悬停,悬停等需要鼠标移动;获取当前鼠标位置(与元素边界进行比较)。
我没有看到这个具体的问题,但是看到有人说过这个问题的各个方面是不可能的......
答案 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)
为什么不呢! :)
这是我的解决方案:
演示代码:
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
}