Jquery HTML鼠标悬停图像在图像上展开

我尝试过很多组合，而这一个是最接近我所需要的

我需要的是一个图像（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);
        })
});

.photo\u链接{
位置：相对位置；
浮动：左；
显示：块；
宽度：133px；
高度：410像素；
边缘顶部：9px；
}
#首页1{
背景图片：“photo_home_1.jpg”）；
}
.新的{
边界：0；
位置：绝对位置；
顶部：20px；
}
$（函数（）{
$（“.photo”）
.mouseover（函数（）{
$（this.stop（）.fadeTo（“fast”，1）；
})
.mouseout（函数（）{
$（this.stop（）.fadeTo（“slow”，0.2）；
})
});

---

有什么办法可以避免这种情况吗？

你也可以用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");
        })

---

在您的代码中，我还发现一些bug，->class=“new*”*src=“<>”）缺失。

我会将鼠标事件添加到

.photo\u link

元素中，并使用and，当鼠标在“out”和元素上移动时，鼠标不再“覆盖”元素时，不会触发and：

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

如果你

浮动；左侧

，您不需要显示：block（这是隐含的）。我帮你清理了一些CSS。另外，我设想您希望在页面加载时隐藏（

opacity:0.2

）元素（请参阅）：

---

这对我来说很有效，简单的解决方案

HTML:

CSS:

---

我的假设是，当您编辑源代码以发布此问题时，您删除了

class=“new”之后的
“
“

。但您可以看到降价是如何错误地突出显示代码的。如果你的来源中没有，请忽略此注释。此来源就是一个例子。。无论如何，谢谢你看到我下面的答案，包括JSFIDLE演示。如果我理解正确，这将演示您所描述的功能。太棒了！我不知道find（）。感谢您的FIDLE链接指向您答案中未包含的代码，

$.live（）

已被弃用（使用

$.on（）

或

$.delegate（）

），并且没有任何迹象表明需要这些链接。这并不能解决“问题”（我遇到的问题是，当我滚动img2时，即在img1上，Jquery认为我正在滚动img1并将其淡出！）请向上投票。

：）

此外，我认为这作为答案更有意义，因为当前标记的答案实际上并不能解决实际问题。这用勾选标记（每个问题可以接受一个答案）。

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

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

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

});

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