迭代列表中的每個圖像並使用jQuery定義懸停狀態

我正在嘗試做一些非常簡單的事情：當用戶將鼠標懸停在滑塊上時，在圖像中的圖像下創建邊框底部。我正在爲此編寫一個jQuery函數，因爲我想將其元素放在我使用jQuery選擇的選擇器之外的其他元素。我的代碼如下：迭代列表中的每個圖像並使用jQuery定義懸停狀態

HTML：

<div class="more-projects-gallery"> 
    <figure class="more-projects-gallery-img-container"> 
     <a href=""><img src="holder.js/120x120" alt="img"></a> 
     <span></span> 
    </figure> 
    <figure class="more-projects-gallery-img-container"> 
     <a href=""><img src="holder.js/120x120" alt="img"></a> 
     <span></span> 
    </figure> 
    <figure class="more-projects-gallery-img-container"> 
     <a href=""><img src="holder.js/120x120" alt="img"></a> 
     <span></span> 
    </figure> 
    <figure class="more-projects-gallery-img-container"> 
     <a href=""><img src="holder.js/120x120" alt="img"></a> 
     <span></span> 
    </figure> 
    <figure class="more-projects-gallery-img-container"> 
     <a href=""><img src="holder.js/120x120" alt="img"></a> 
     <span></span> 
    </figure> 
    <figure class="more-projects-gallery-img-container"> 
     <a href=""><img src="holder.js/120x120" alt="img"></a> 
     <span></span> 
    </figure> 
</div>

CSS（或SCSS）：

.more-projects-gallery-img-container { 
    a { 
     cursor: default; 
    } 
    img { 
     cursor: pointer; 
    } 
    span { 
     display: none; 
     @include size(120px 5px); 
     background-color: $light-blue; 
     @include position(absolute, null null -14px 42px); 
    } 
}

jQuery的：

$(function galleryImageHover() { 

    var $galleryImageContainer = $('.more-projects-gallery-img-container'); 
    var $galleryImage = $('.more-projects-gallery-img-container a'); 
    var $galleryImageSpan = $('.more-projects-gallery-img-container span'); 

    $galleryImageContainer.each(function(){ 
     $galleryImage.on("mouseover", function(){ 
      $galleryImageSpan.fadeIn(300).show(); 
     }); 
    }); 
    $galleryImageContainer.each(function(){ 
     $galleryImage.on("mouseout", function(){ 
      $galleryImageSpan.fadeOut(300).hidden(); 
     }); 
    }); 

});

我遇到的問題是，當您將鼠標懸停在任何圖像上時，將爲滑塊中的所有圖像激活懸停狀態，而不僅僅是用戶當前被篡改的一個圖像。ov呃英寸任何幫助將不勝感激。我一直在這一段時間，似乎無法讓它工作。

來源

2014-09-29 jtarr523

您正在將fadeIn和fadeOut應用於.more-projects-gallery-img-container中的所有span，因此懸停狀態將爲ALL激活。

試試這個（根據您所提供的HTML）：

$(function galleryImageHover() { 

    var $galleryImageContainer = $('.more-projects-gallery-img-container'); 
    var $galleryImage = $('.more-projects-gallery-img-container a'); 
    //var $galleryImageSpan = $('.more-projects-gallery-img-container span'); //You won't need this. 

    $galleryImageContainer.each(function(){ 
     $galleryImage.on("mouseover", function(){ 
      $(this).next().fadeIn(300).show(); // changed the selector here to select the next span rather than all the spans 
     }); 
    }); 
    $galleryImageContainer.each(function(){ 
     $galleryImage.on("mouseout", function(){ 
      $(this).next().fadeOut(300).hidden(); // changed the selector here to select the next span rather than all the spans 
     }); 
    }); 

});

來源

2014-09-29 22:51:17 Chandu

這似乎工作。非常感謝！ – jtarr523 2014-09-29 23:29:52

你可以連續在jQuery的方法，那麼你的鏈條和鼠標移開mouover事件偵聽器。然後，您需要循環觀看圖像，以便可以在循環內部定位圖像和跨度。

$(function galleryImageHover() { 

     var $galleryImageContainer = $('.more-projects-gallery-img-container'); 

     $galleryImageContainer .each(function(){ 
      $(this).find("a").on("mouseover", function(){ 
       $(this).find('span').fadeIn(300).show(); 
      }).on("mouseout", function(){ 
       $(this).find('span').fadeOut(300).hidden(); 
      }); 
     }); 

    });

來源

2014-09-29 22:52:50

我會說，你應該做這樣的事情：

$galleryImageContainer.on("mouseover", 'a', function(){ 
    $(this).parent().children('span').fadeIn(300).show(); 
});

jQuery的選擇所有的元素是，因爲你告訴它的原因。在我的例子中，只有具有該事件的孩子被激活。

希望我能幫助你。

來源

2014-09-29 22:53:58

迭代列表中的每個圖像並使用jQuery定義懸停狀態

回答

相關問題