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。問題は、マウスが実際に新しいホバーリム上にあるため、マウスを離れるときに削除が起動しないことです

あなたが私の主張を理解してくれることを願っています!ありがとう

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

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 に答える
1

代わりにhoverイベントをバインドするとどうなりますか?#wrapper

このFIDDLEで動作します。

于 2013-05-22T17:08:29.690 に答える
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();
  });

の代わりにmouseoverandを使用しました。mouseouthover

マウスオーバーで両方の画像を表示し、マウスアウトで追加された画像を削除したいのでわかりました。それは正しいですか?

于 2013-05-22T17:14:39.037 に答える