使用濾鏡后，流沙投資組合的懸停效果仍然可見

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文件中向.thumbnail-overlay添加了display: none 。 然后我將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是containig div，因此它是使用過濾器時不會動態更改的元素。