Question

我正在使用jQuery插件hoverIntent。问题是有时加载页面时，鼠标已经在对象'#gallery'上，因此不会触发hoverIntent代码。

以下是我的代码示例：

$(document).ready(function(){
  $('#gallery').hoverIntent(function(){
    $('.gallery-thumbs').stop().animate({'height': '65px'},400); //in code animating a element child within #gallery
  },function(){
    $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery
  });
});

有人知道这方面的解决方案吗？

Answer 1

我建议如果你想继续使用这个库的解决方案是抓住第一个（并且只有第一个，带有one）mousemove事件，并检查鼠标是否在此时#gallery上。< / p>

您可以使用以下方法检查事件是否在对象上：

var eventIsOver = function(event, o) {
    if ((!o) || o==null) return false;
    var pos = o.offset();
    var ex = event.pageX;
    var ey = event.pageY;
    if (
        ex>=pos.left
        && ex<=pos.left+o.width()
        && ey>=pos.top
        && ey<=pos.top+o.height()
    ) {
        return true;
    }
    return false;
};


$(document).ready(function(){
  $('body').one('mousemove', function(e) {
     if (eventIsOver(e, $('#gallery')) {
         // do what you want to do if the mouse is on the gallery initially
     }
  });
  $('#gallery').hoverIntent(function(){
    $('.gallery-thumbs').stop().animate({'height': '65px'},400); //in code animating a element child within #gallery
  },function(){
    $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery
  });
});

Answer 2

这是你在寻找什么？

$(document).ready(function(){
    $(document).one("mousemove", function(e) {
        if (mouse pointer is on gallery) {
            $('.gallery-thumbs').stop().animate({'height': '65px'}, 400);
        }
    });

    $('#gallery').hoverIntent(function() {
        $('.gallery-thumbs').stop().animate({'height': '65px'}, 400); //in code animating a element child within #gallery
    },function() {
        $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery
    });
});

Answer 3

我放弃了一个完美的解决方案，并设置为在#gallery

中的子元素上触发mouseenter

$('.gallery-nav').mouseenter(function(){
    $('#gallery').trigger("mouseenter");
});

Answer 4

对于那些寻求其他解决方案的人来说，这是我的：

$('myselector').hoverIntent({
  over: myOverfunc,
  out: myOutfunc
});

$('myselector').trigger('mouseenter.hoverIntent');

注意＆＃39; mouseenter.hoverIntent＆＃39;因为它是插件注册的事件（在r7上测试）。

Answer 5

由于js中存在一些错误，它有一些问题，

我已经做了所有艰苦的工作。你只需要添加选项

我已经解决了。你可以从这里得到js。当你调用slimscroll函数时添加以下选项

的mouseOver：真

作为演示

jQuery('#scroll').slimScroll({
       height: jQuery(window).height()+'px',
        railVisible: true,
        allowPageScroll: true,
        mouseOver:true
    });

Visit Link / Download Here

jQuery hoverIntent Not Firing如果鼠标已经在文档准备好的元素上

5 个答案: