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

【问题标题】：mouse enter/out function affect only the closest div鼠标输入/输出功能仅影响最近的 div
【发布时间】：2014-12-01 06:46:51
【问题描述】：

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 上时，它会显示所有大声笑的 div。我只想影响lol div并且在<hr>

JS FIDDLE LINK

【问题讨论】：

标签： jquery mouseenter onmouseout

【解决方案1】：

你需要这样做：

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

【讨论】：

【解决方案2】：

使用当前上下文 this 和选择器 .nextAll('.lol:eq(0)') 仅定位所需的 div。

您还需要在mouseout 上使用mouseleave 并修改事件以淡出元素：

 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

【讨论】：

鼠标移出时不会淡出 =(
@MilindAnantwar _但是 OP 想要 setTimeOut

【解决方案3】：

在 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

【讨论】：

鼠标移出时它们不会淡出。
hover 有效，但它是否适用于 var 计时器？我真的需要那个。
如果您快速上下移动鼠标，部分或全部的笑声不会消失。此外，使用 .next() 对我来说并不理想，这是一个简化的示例。在我的网站上，在 up-score 和 lol 之间可能有 15 个以上的 div
@Newbie - 现在检查小提琴并告诉我，如果没有来我们就去另一条路
几乎，但是如果您将鼠标悬停在第 3 个最高分上并快速将鼠标悬停在第 2 个最高分上，则第 3 个大声笑不会消失。