Img正在阻止悬停功能启动

img is blocking hover function to fire

本文关键字：悬停 功能 启动 Img      更新时间：2023-09-26

我需要一些帮助:我在body中放置了一个带有悬停功能的图像

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

上。

希望你明白我的意思!由于

工作小提琴演示

也许用另一个标记，更容易这样做:

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

必须使用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");
        }                         
    );

如果您将hover事件绑定到#wrapper怎么办?

在这个<<p>, strong>小提琴。

请看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。

我理解为您想要在鼠标悬停时显示两个图像并在鼠标悬停时删除添加的图像。这对不对?

相关文章：