將圖像懸停效果應用於整個容器

Question

當我將鼠標懸停在容器上時，如何將此懸停效果應用於此容器中的所有圖像？

http://www.photoshop-plus.co.uk/2012/05/21/jquery-color-fade-hover-effect/

jQuery的

$(document).ready(function(){ 
    $("img.grey").hover(
    function() { 
    $(this).stop().animate({"opacity": "0"}, "slow"); 
    }, 
    function() { 
    $(this).stop().animate({"opacity": "1"}, "slow"); 
    }); 
}); 

CSS

<ul class="gallery"> 
<li> 
<img src="images/01_grey.gif" class="grey" /> 
<img src="images/01_color.gif" class="color" /> 
</li> 

<li> 
<img src="images/02_grey.gif" class="grey" /> 
<img src="images/02_color.gif" class="color" /> 
</li> 
</ul> 

Answer 1

這裏是你如何實現它：http://jsfiddle.net/xEuD7/

待辦事項您需要實現CSS和將JavaScript插件導入您的頁面！

.gallery li { 
    float: left; 
    margin-right: 20px; 
    list-style-type: none; 
    margin-bottom: 20px; 
    display: block; 
    height: 130px; 
    width: 130px; 
    position: relative; 
} 
img.grey { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
} 
img.color { 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

UPDATE：

$(document).ready(function(){ 
    $("img.grey").hover(
    function() { 
     $(this).parents('.gallery').find("img.grey").stop().animate({"opacity": "0"}, "slow"); 
    }, 
    function() { 
     $(this).parents('.gallery').find("img.grey").stop().animate({"opacity": "1"}, "slow"); 
    }); 
});