mouse enter/out function affect only the closest div

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

Right now when I hover over any up-score div it shows all the lol's divs. I just want to affect only the lol div and is within the <hr>

JS FIDDLE LINK

Answer 1

Use next() in jquery

  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

Use current context this along with selector .nextAll('.lol:eq(0)') to target only the desired div.

You will also need to use mouseleave instead on mouseout and modify the event to fade out the element:

 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

You need to do this:

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