Question

我尝试过这么多组合，这个组合就是我能找到的最接近的组合。

我需要的是一个图像（img1），另一个（较小的）图像（img2）覆盖它，当我翻转img1时，我希望它淡入（并在淡出时淡出），让img2不受影响。<登记/> 我得到的问题是，当我翻转img2时，即img1，Jquery认为我正在推出img1并将其淡出来！

这是我到目前为止所做的：

.photo_link {
    position: relative;
    float: left;
    display: block;
    width: 133px;
    height: 410px;
    margin-top: 9px;
}
#home_1 {
    background-image: 'photo_home_1.jpg');
}
.new {
    border: 0;
    position: absolute;
    top: 20px;
}

<a class="photo_link">
    <span class="photo" id="home_1"></span>
    <img class="new src="new.png" />
</a>

$(function(){
    $('.photo')
        .mouseover(function(){
            $(this).stop().fadeTo("fast", 1);
        })
        .mouseout(function(){
            $(this).stop().fadeTo("slow", 0.2);
        })
});

有没有办法避免这种情况？

Answer 1

你也可以用CSS动画来做，

.photo_link>span{ 
display: block; 
transition: all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
}

.photo_link:hover>span{ 
display: none;
}

或者使用JS，只需应用fadeToggle即：

$('.photo_link')
        .mouseover(function(){
            $(this).find("span").fadeToggle("fast");
        })
        .mouseout(function(){
            $(this).find("span").fadeToggle("fast");
        })

同样在你的代码中我发现了一些错误， - ＆gt; class =“new * ” * src =“＆lt;”＆gt;不见了。

Answer 2

我会将鼠标事件添加到.photo_link元素，并使用$.mouseenter()和$.mouseleave()，当鼠标不再“覆盖”某个元素时，不会触发这些事件out“和其中的元素：

$(function(){
    $('.photo_link')
        .mouseenter(function(){
            $(this).find('img').stop().fadeTo("fast", 1);
        })
        .mouseleave(function(){
            $(this).find('img').stop().fadeTo("slow", 0.2);
        })
});

http://jsfiddle.net/CMyAZ/

如果您float; left，则不需要display: block（暗示）。我清理了一些你的CSS。另外，我想你想在页面加载时隐藏（opacity: 0.2）元素（参见Quirksmode for cross-browser opacity）：

.photo_link {
    position: relative;
    float: left;
    width: 128px;
    height: 128px;
    margin-top: 9px;
}
#home_1 {
    position: absolute;
    z-index: 1;
    display: block;
    top: 20px;
    left: 0;
    height: 32px;
    width: 32px;
    background: url('http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG');
}
.new {
    position: absolute;
    top: 20px;
    left: 0;
    border: 0;
    opacity: 0.2;
}

Answer 3

这对我有用，简单的解决方案......

http://jsfiddle.net/YWzDH/3/

HTML：

<img class="img2" src="img2.jpg" />
<img class="img1" src="img1.jpg" />

jQuery的：

$(document).ready(function(){
    $('body').live({
            mouseenter: function() {
              $('.img2').fadeTo("fast", 1);
            },
            mouseleave: function() {
              $('.img2').fadeTo("slow", 0.2);
            }
        }, '.img1, .img2');

});

CSS：

.img1{
    position: absolute;
    left: 0;
    top: 0;
}
.img2{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.2;
}

HTML鼠标悬停图像覆盖图像

3 个答案: