Javascript img正在阻止悬停功能启动

我需要以下方面的帮助： 我有一个图像放在我的身体，它有一个悬停功能

<div id="wrapper">
<img style="position: absolute;" src="img/image.png" name="man" width="150" id="man_1" />
</div>

 $("#man_1").hover(function () {
     $('#wrapper').append('<img id="hoverimg" src="bla.png">');
     console.log("enter mouser");
 },function () {
     $('#hoverimg').remove();
     console.log("leave mouse");
 });

$（“#man_1”）。悬停（函数（）{
$（'#包装器'）。附加（''）；
console.log（“输入鼠标”）；
}，函数（）{
$（'#hoverimg'）。删除（）；
log（“离开鼠标”）；
});

正如你看到的，当我在图像上悬停时，它会附加另一个图像，该图像具有与

#man_1

相同的顶部和左侧值。问题是，当我离开鼠标时，删除不会触发，因为鼠标实际上位于新的hoverimg上

---

希望你明白我的意思！谢谢

您必须使用mouseenter和mouseout事件

$("#man_1").mouseenter(
        function() {
            $('#wrapper').append('<img id="hoverimg" src="bla.png">');
            console.log("enter mouser");
        });
$('#hoverimg').mouseout(
        function() {
           $('#hoverimg').remove();
            console.log("leave mouse");
        }                         
    ); 

$（“#man_1”）.mouseenter(
函数（）{
$（'#包装器'）。附加（''）；
console.log（“输入鼠标”）；
});
$（'#hoverimg'）.mouseout(
函数（）{
$（'#hoverimg'）。删除（）；
log（“离开鼠标”）；
}                         
); 

您必须使用mouseenter和mouseout事件

$("#man_1").mouseenter(
        function() {
            $('#wrapper').append('<img id="hoverimg" src="bla.png">');
            console.log("enter mouser");
        });
$('#hoverimg').mouseout(
        function() {
           $('#hoverimg').remove();
            console.log("leave mouse");
        }                         
    ); 

$（“#man_1”）.mouseenter(
函数（）{
$（'#包装器'）。附加（''）；
console.log（“输入鼠标”）；
});
$（'#hoverimg'）.mouseout(
函数（）{
$（'#hoverimg'）。删除（）；
log（“离开鼠标”）；
}                         
); 

如果将

悬停

事件绑定到

#包装器

会怎么样

---

在这种情况下，这是可行的。

如果您将

悬停

事件绑定到

#包装器

会怎么样

在这方面，这是可行的。

请看

$（“div.overout”）.mouseover（函数（）{
$（this.append（“”）
}).mouseout（函数（）{
$（“#悬停”）.remove（）；
});

我使用了

mouseover

和

mouseout

而不是

hover

我明白了，因为您希望在mouseover上显示这两个图像，并删除mouseout上添加的图像。这对不对？请看一下

$（“div.overout”）.mouseover（函数（）{
$（this.append（“”）
}).mouseout（函数（）{
$（“#悬停”）.remove（）；
});

我使用了

mouseover

和

mouseout

而不是

hover

我明白了，因为您希望在mouseover上显示这两个图像，并删除mouseout上添加的图像。这对不对？

也许通过另一个标记，可以更容易地实现这一点：

HTML JS

也许通过另一个标记，可以更容易地实现这一点：

HTML JS

---

将mouseleave处理程序添加到新图像并将其删除怎么样？或者更改旧图像的src属性而不是添加新图像？感谢这一点，这就是我以前制作的。但我需要第二张照片，这就是我为什么要问的原因！嗯，预期的行为是什么，我认为它对我有效：/这是有效的，因为附加的图像在悬停的图像后面。改变z-指数，你会看到它不会工作没有闪烁！无论如何，谢谢你的努力！将mouseleave处理程序添加到新图像并将其删除怎么样？或者更改旧图像的src属性而不是添加新图像？感谢这一点，这就是我以前制作的。但我需要第二张照片，这就是我为什么要问的原因！嗯，预期的行为是什么，我认为它对我有效：/这是有效的，因为附加的图像在悬停的图像后面。改变z-指数，你会看到它不会工作没有闪烁！无论如何，谢谢你的努力！我想你是指

mouseleave

而不是

mouseout

？#man_1是一个img，不能包含其他元素。所以你可以两者都用。看，这应该是答案。我会在几分钟后检查！我想你是指

mouseleave

而不是

mouseout

？#man_1是一个img，不能包含其他元素。所以你可以两者都用。看，这应该是答案。我会在几分钟后检查！

<div id="wrapper">
    <div class="photo">
        <div class="image"><img src="http://placekitten.com/200/220" /></div>
        <div class="size"><img src="http://placehold.it/200x40" /></div>
    </div>
</div>

.photo {
    position: relative;
    height: 220px;
    overflow: hidden;
    width: 200px;
}

.photo .image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}


.photo .size {
    position: absolute;
    height: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin-bottom: -40px;
    transition: margin-bottom 0.3s;
}

.photo .size.show {
    margin-bottom: 0;
}

$(function () {
    $('.photo')
        .on('mouseenter', function () {
            $(this).find('.size').addClass('show');
        })
        .on('mouseleave', function () {
            $(this).find('.size').removeClass('show');
        });
});