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;
}

更新：

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

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

1 个答案: