1

私はこのような画像に使用してdivを挿入しinserAfter()ました：

$('<div class="q"></div>').insertAfter('img');

divをに設定しdisplay:none、jqueryで表示したいので、次のようにしました。

$('img').on('hover', function(e){
      $(this).each(function (i) {
    $(this).closest('.q').show();
  });
        });

動作しません。imgにカーソルを合わせると、divはまだ非表示になっています。コードに問題はありません。何を試すことができますか？

JsFiddle

4

3 に答える 3

2

CSSだけでも同じことができることに注意してください。関連するセレクターは、とにかくブラウザーとの互換性が非常に優れています。

div.q {
    display:none;
}

img:hover + div.q {
    display:block;
}

実際には、これでうまくいくはずです。

于 2013-03-25T13:52:47.603 に答える
1

closest選択した要素の最も近い親を選択しますnext。代わりにメソッドを使用する必要があります。また、メソッドでhoverイベントを使用することは非推奨です。on

jQuery 1.8で非推奨、1.9で削除：文字列「mouseentermouseleave」の省略形として使用される名前「hover」。これらの2つのイベントに対して単一のイベントハンドラーをアタッチし、ハンドラーはイベントがであるかどうかを判断するために調べる必要がevent.typeあります。「ホバー」疑似イベント名を、1つまたは2つの関数を受け入れるメソッドと混同しないでください。mouseentermouseleave.hover()

$('img').on({
    mouseenter: function() {
        $(this).next('.q').show();
    },
    mouseleave: function() {
        $(this).next('.q').hide();
    }
});

http://jsfiddle.net/yyAma/

于 2013-03-25T13:46:34.890 に答える
1

LIVE DEMO

HTML：

<div class="addQ">
   <img  src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>

<div class="addQ">
   <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>

CSS：

.addQ{
    position:relative;
    float:left;
    margin:10px;
}

.addQ img {
   position:relative;
    vertical-align:middle;
    width:300px;
}


.q {
    position:absolute;
    top:0;
    box-shadow:inset 0px 0px 85px red;
    -webkit-box-shadow:inset 0px 0px 85px red;
    -moz-box-shadow:inset 0px 0px 85px red;
    z-index: 3;
    display:none;
}

jQ：

$(function(){

    var addQimg = $('.addQ img');
    var wi = addQimg.width();
    var he = addQimg.height();

    $('.addQ').each(function(){
        $(this).append("<div class='q' />");
        $(this).find('.q').width(wi).height(he);
    }).on('mouseenter mouseleave', function( e ){
        var opacity = e.type=='mouseenter' ? 1 : 0 ;
        $(this).stop().find('.q').fadeTo(700, opacity); 
    });

});
于 2013-03-25T14:01:17.660 に答える