HTML
<div class="up-score">up-score</div>
<div class="vframe">vframe</div>
<div class="lol">lol</div>
<hr>
<div class="up-score">up-score</div>
<div class="vframe">vframe</div>
<div class="lol">lol</div>
<hr>
<div class="up-score">up-score</div>
<div class="vframe">vframe</div>
<div class="lol">lol</div>
CSS
.lol { display: none; }
Jquery的
var timer
$('.up-score').mouseenter(function(){clearTimeout(timer);$('.vframe').parent().find('.lol').fadeIn(1000)})
$('.up-score').mouseout(function(){timer = setTimeout(function(){$('.vframe').parent().find('.lol').fadeOut(1000);}, 500);})
现在,当我将鼠标悬停在任何一个高分div上时,它会显示所有lol的div。我只想影响lol div并且在<hr>
答案 0 :(得分:0)
在jquery中使用next()
var timer;
$('.up-score').mouseenter(function(){clearTimeout(timer);$(this).next().next('.lol').fadeIn(1000)});
$('.up-score').mouseout(function(){
var _this = this;
timer = setTimeout(function(){ $(_this).next().next('.lol').fadeOut(1000);
}, 500);
});
答案 1 :(得分:0)
使用当前上下文this
以及选择器.nextAll('.lol:eq(0)')
来仅定位所需的div。
您还需要在mouseleave
上使用mouseout
并修改该事件以淡出元素:
var timer;
$('.up-score').mouseenter(function(){clearTimeout(timer);$(this).nextAll('.lol:eq(0)').fadeIn(1000)})
$('.up-score').mouseleave(function(){timer = setTimeout(function()$(this).nextAll('.lol:eq(0)').fadeOut(1000);}, 500);});
<强> Working Demo 强>
答案 2 :(得分:0)
你需要这样做:
$('.up-score').mouseenter(function () {
$(this).next('.vframe').next('.lol').fadeIn(1000)
});
$('.up-score').mouseout(function () {
$(this).next('.vframe').next('.lol').fadeOut(1000);
});