Question

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

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

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

Answer 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");
        }                         
    );

Answer 2

如果您将hover事件绑定到#wrapper，该怎么办？

这可行，FIDDLE。

Answer 3

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');
        });
});

Answer 4

请查看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();
  });

我使用mouseover和mouseout代替hover。

我明白你想在鼠标悬停时显示两个图像并在mouseout上删除添加的图像。这是否正确？

img阻止悬停功能开火

4 个答案:

HTML

CSS

JS