0

我在以下方面需要一些帮助：我的身体中放置了一张具有悬停功能的图像

<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. 问题是，当我离开鼠标时，删除不会触发，因为鼠标实际上是在新的 hoverimg

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

4

4 回答 4

1

您必须使用 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");
        }                         
    );
于 2013-05-22T17:03:25.310 回答
1

如果您将hover事件绑定到#wrapper而不是怎么办？

这行得通，在这个FIDDLE中。

于 2013-05-22T17:08:29.690 回答
1

Working FIDDLE Demo

也许使用另一个标记，更容易做到这一点：

HTML

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

CSS

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

JS

$(function () {
    $('.photo')
        .on('mouseenter', function () {
            $(this).find('.size').addClass('show');
        })
        .on('mouseleave', function () {
            $(this).find('.size').removeClass('show');
        });
});
于 2013-05-22T17:17:49.683 回答
0

请看一下http://jsfiddle.net/2dJAN/43/

<div class="out overout">
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSuTs4RdrlAhxd-qgbGe9r0MGB9BgwFrHDvfr9vORTBEjIYnSQ8hg" />
</div>

  $("div.overout").mouseover(function() {
    $(this).append("<img src='http://files.softicons.com/download/system-icons/apple-logo-icons-by-thvg/png/512/Apple%20logo%20icon%20-%20Classic.png' id='hovering'/>")
  }).mouseout(function(){
    $('#hovering').remove();
  });

我用mouseoverandmouseout而不是hover.

我知道您想在鼠标悬停时显示两个图像并在鼠标悬停时删除添加的图像。这是正确的还是不正确的？

于 2013-05-22T17:14:39.037 回答