jquery - HTML Mouseover image over image 推出

Question

我已经尝试了很多组合，而这个是最接近我需要的组合。

我需要的是一个图像 (img1)，上面有另一个(较小的)图像 (img2)，当我翻转 img1 时，我希望它淡入(并在滚出时淡出)，而 img2 保持不变。< br/>我遇到的问题是，当我将 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

我会将鼠标事件添加到 .photo_link 元素，并使用 $.mouseenter()和 $.mouseleave() ，当鼠标不再“超过”一个元素时，当鼠标“移出”并超过其中的一个元素时，它们不会被触发:

$(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/

如果你漂浮; 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;
}