Question

我有一个带有插件的wordpress网站，用于图片的滑块/拇指。当我将鼠标悬停在图像上时，会出现缩略图，然后当我离开图像时，它们会消失。我遇到的问题是当我向下滚动页面时，缩略图重新出现并且不会消失。它以某种方式将悬停绑定到页面滚动。

这是隐藏/显示缩略图的脚本：

initAutoHide:function(){// Init Auto Hide
                    HideID = setInterval(methods.hideItems, parseInt(AutoHideTime));

                    $('.DOP_ThumbnailGallery_Container', Container).hover(function(){
                        methods.showItems();
                    }, function(){
                        HideID = setInterval(methods.hideItems, parseInt(AutoHideTime));
                    });
                },
                showItems:function(){// Show Items
                    clearInterval(HideID);
                    ItemsHidden = false;

                    if (imageLoaded){
                        $('.DOP_ThumbnailGallery_NavigationLeft', Container).css('display', 'block');
                        $('.DOP_ThumbnailGallery_NavigationRight', Container).css('display', 'block');
                    }

                    if (ThumbnailsPosition == 'top'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-top': 0}, 600);
                    }
                    if (ThumbnailsPosition == 'right'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-left': $('.DOP_ThumbnailGallery_Container', Container).width()-$('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).width()}, 600);
                    }
                    if (ThumbnailsPosition == 'bottom'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-top': $('.DOP_ThumbnailGallery_Container', Container).height()-$('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).height()}, 600);
                    }
                    if (ThumbnailsPosition == 'left'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-left': 0}, 600);
                    }
                    methods.showCaption();
                },
                hideItems:function()
                {
                    clearInterval(HideID);
                    ItemsHidden = true;

                    $('.DOP_ThumbnailGallery_NavigationLeft', Container).css('display', 'none');
                    $('.DOP_ThumbnailGallery_NavigationRight', Container).css('display', 'none');

                    if (ThumbnailsPosition == 'top'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-top': 0-$('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).height()}, 600);
                    }
                    if (ThumbnailsPosition == 'right'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-left': $('.DOP_ThumbnailGallery_Container', Container).width()}, 600);
                    }
                    if (ThumbnailsPosition == 'bottom'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-top': $('.DOP_ThumbnailGallery_Container', Container).height()}, 600);
                    }
                    if (ThumbnailsPosition == 'left'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-left': 0-$('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).width()}, 600);
                    }
                    methods.hideCaption();
                }
              },

当没有直接覆盖图像时，是否有人可以推荐杀死悬停的最佳方法？

再加上这个，滚动时我可以隐藏这个：

$(document).scroll(function(){
$(".DOP_ThumbnailGallery_ThumbnailsContainer").hide();

 });

现在，如果用户将鼠标悬停在图像上，我该如何将其恢复？

谢谢，添

Answer 1

我过去遇到过类似的问题，我认为这与滚动不触发mouseout()事件有关，因为从技术上讲，鼠标没有移动。遗憾的是，这是在浏览器级别完成的 - 尝试将鼠标悬停在SO上的链接上，然后使用箭头键滚动，链接将保持在其悬停状态，直到您移动鼠标。

解决方法是在页面滚动时隐藏所有图像，在打开新图像时隐藏所有其他图像可能更优雅。

向下滚动页面时，jQuery悬停保持活动状态

1 个答案: