1

我已经使用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仍然隐藏。我看不出我的代码有什么问题。我可以尝试什么？

提琴手

4

3 回答 3

2

我觉得应该注意的是，你可以只使用 CSS 来做同样的事情，而且所涉及的选择器无论如何都具有很好的浏览器兼容性。

div.q {
    display:none;
}

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

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

于 2013-03-25T13:52:47.603 回答
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;
}

问：

$(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 回答
1

closest选择所选元素的最近父级，您应该改用next方法。也不推荐使用hover带有on方法的事件。

在 jQuery 1.8 中弃用，在 1.9 中删除：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加了一个事件处理程序，并且处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要将“悬停”伪事件名称与.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 回答