使用滤镜后，流沙投资组合的悬停效果仍然可见

Question

I read a lot about people having trouble with quicksand and hover effects because they wouldn't be visible after filtering.

In my case it's the exact opposite. I applied a hover effect via jQuery and it just works fine on page load, but after using filters the hover effect simply stays visible on some images (not even every image is affected) and when I hover the hover-effect disappears. It's the exact opposite behaviour of what it's supposed to be.

Can someone help me here?

For explanation:

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

Alright, I found the problem.

Explanation:

The hover-effect would be visible on some items after using a filter, because I did not hide the .thumbnail-overlay <div> via CSS but jQuery. So if I would use one of the filters, the code would already have been executed which means that my .hide() function does not affect portfolio items that are added dynamically.

Solution:

I added display: none to .thumbnail-overlay in my CSS file. Then I changed my jQuery function to this:

// 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');    
    })

The selector #main-content is the containig div, so it's an element that's not being dynamically changed when using a filter.