我已使用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仍然隐藏。我看不出我的代码有什么问题。我该怎么办?
答案 0 :(得分:2)
我觉得应该注意的是,你可以只使用CSS做同样的事情,选择器涉及have great browser compatibility anyway。
div.q {
display:none;
}
img:hover + div.q {
display:block;
}
实际上,这应该可以解决问题。
答案 1 :(得分:1)
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();
}
});
答案 2 :(得分: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);
});
});