将图像悬停效果应用于整个容器答案

【问题标题】：Applying image hover effect to the whole container将图像悬停效果应用于整个容器
【发布时间】：2013-03-13 03:09:45
【问题描述】：

当我悬停容器时，如何将此悬停效果应用于此容器中的所有图像？

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>

【问题讨论】：

到目前为止你尝试过什么？还要确保您阅读了常见问题解答 stackoverflow.com/faq，因为这个问题不应该在这里问。

标签： jquery hover gallery fadein

【解决方案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;
}

更新：

$(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");
    });
});

【讨论】：

在 Dreamweaver 中全部打开，谢谢。但是，当悬停 ul 时，如何对图库中的所有图像进行悬停效果？
这真是太棒了！非常感谢塞缪尔！