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

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

这是你要找的吗？

$(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 2

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

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

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 3

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

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

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

注意'mouseenter.hoverIntent'，因为它是插件注册的事件（在r7上测试）。

Answer 4

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

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

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

鼠标悬停：真

作为演示

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

访问链接/在此处下载

Answer 5

我放弃了一个完美的解决方案，并设置为在#gallery 中的子元素上触发 mouseenter

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