Question

我读了很多关于流沙和悬停效果有问题的人，因为过滤后它们不会显示。

就我而言，恰恰相反。我通过jQuery应用了悬停效果，它在页面加载时工作得很好，但在使用滤镜后，悬停效果在某些图像上保持可见（甚至不会影响每个图像），当我悬停时，悬停效果消失。这与它应该是完全相反的行为。

有人可以帮助我吗？

解释：

HTML

 <ul class="filterable-grid">
        <li>
            <span class="portfolio-thumbnail">  
                <img src="#">
            </span>                             


            <span class="thumbnail-overlay">
                <div class="infotext">
                    <h4><a href="#">Title</a></h4>
                    <p>lorem ipsum</p>
                </div>
           </span>
        </li>
</ul>

的jQuery

$(document).ready(function() {
    $('.thumbnail-overlay').hide();
     $('.filterable-grid li').live('hover', function(){
          $(this).css('box-shadow', 'inset 0px 0px 55px -2px rgba(0,0,0,1)')
          $(this).find('.thumbnail-overlay').toggle('slow');
          return false;
     });
});

Answer 1

好吧，我发现了问题。

<强>解释

使用过滤器后，某些项目会显示悬停效果，因为我没有通过CSS隐藏.thumbnail-overlay <div>而是jQuery。因此，如果我使用其中一个过滤器，则代码已经执行，这意味着我的.hide()函数不会影响动态添加的项目组合项。

<强>解决方案：

我在我的CSS文件中将display: none添加到.thumbnail-overlay。然后我将我的jQuery函数改为：

// Show Overlay on mouseover
    $('#main-content').on('mouseover', '#quicksand-portfolio li', function(){
        $(this).find('.thumbnail-overlay').stop().toggle('slow');    
    })

    $('#main-content').on('mouseout', '#quicksand-portfolio li', function(){
        $(this).find('.thumbnail-overlay').stop().toggle('slow');    
    })

选择器#main-content是包含div，因此它是使用过滤器时不会动态更改的元素。

使用过滤器后，流沙组合悬停效果保持可见

1 个答案: