在悬停img上显示div

Question

我已使用inserAfter()将div插入到这样的图像中：

$('<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

Answer 1

我觉得应该注意的是，你可以只使用CSS做同样的事情，选择器涉及have great browser compatibility anyway。

div.q {
    display:none;
}

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

实际上，这应该可以解决问题。

Answer 2

closest选择所选元素中最接近的父元素，您应该使用next方法。使用hover方法同时使用on方法deprecated。

  

在jQuery 1.8中弃用，在1.9中删除：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加了一个事件处理程序，处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要将“hover”伪事件名称与.hover()方法混淆，后者接受一个或两个函数。

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

http://jsfiddle.net/yyAma/

Answer 3

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

});