Question

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>

之内

JS FIDDLE LINK

Answer 1

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

Fiddle

Answer 2

使用当前上下文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

Answer 3

你需要这样做：

$('.up-score').mouseenter(function () {
    $(this).next('.vframe').next('.lol').fadeIn(1000)
});
$('.up-score').mouseout(function () {
    $(this).next('.vframe').next('.lol').fadeOut(1000);
});

鼠标输入/输出功能仅影响最近的div

3 个答案: