Question

我希望用户能够查看我开发的网站的完整屏幕截图，然后当它们悬停在其上时，另一个div会显示一些元信息。

以下是测试链接 - http://www.deanelliott.me/misc/test-port/index.html

正如您所看到的，如果您将鼠标悬停在幻灯片上，则会出现一个很好的叠加层，但是当您将其悬停并且下一张幻灯片开始播放时，叠加层会在不应该显示时显示。

如果有人对问题是什么有任何想法会很棒！

由于

编辑：这是相关代码

$(function(){
$('#slideshow').hover(
    function(){
            $('.slideimage').fadeOut(100, function(){
                    $('.slideoverlay').fadeIn(100);                                            
            });
    },
    function(){
            $('.slideoverlay').fadeOut(100, function(){
                    $('.slideimage').fadeIn(100);                                           
            });
    }
    );
});

.slideoverlay设置为通过CSS显示：none

Answer 1

出于某种原因，您fadeIn()已应用于所有slideoverlay，但fadeOut()仅应用于当前可见的fadeIn()。我会尝试这样做，fadeOut和$(function(){ $('#slideshow .slide').hover( function(){ var $this = $(this); $this.find('.slideimage').fadeOut(100, function(){ $this.find('.slideoverlay').fadeIn(100); }); }, function(){ var $this = $(this); $this.find('.slideoverlay').fadeOut(100, function(){ $this.find('.slideimage').fadeIn(100); }); } ); });只影响您正在盘旋的实际值。像这样：

$('.slideimage')

可能会使用一些优化，但我认为这应该有效。虽然没有测试过，祝你好运。

尝试这个摆脱白色闪光。基本上，如果你只是覆盖覆盖层，你就不需要隐藏$(function(){ $('#slideshow .slide').hover( function(){ var $this = $(this); $this.find('.slideoverlay').fadeIn(100); }, function(){ var $this = $(this); $this.find('.slideoverlay').fadeOut(100); } ); });。您需要做的就是隐藏并显示slideoverlay。

{{1}}

Jquery悬停功能无法正常工作

1 个答案: