在具有相同类别的一组div中将鼠标悬停在单个div上显示覆盖

Question

Let's say I have 4 dynamically generated div's, each with the same class, and unique number ids, like so. Each contains an absolutely positioned div with 100% width and height so when displayed, it fills the entire div.

<div class="my_class" id="1">
    <div class="overlay"></div>
</div>

<div class="my_class" id="2">
    <div class="overlay"></div>
</div>

<div class="my_class" id="3">
    <div class="overlay"></div>
</div>

<div class="my_class" id="4">
    <div class="overlay"></div>
</div>



<style>
    .overlay {
        display:none;
    }
</style>

When I hover over one of these divs, I want that div, and none of the others to display the overlay, then when I stop hovering, the overlay div should disappear. Any ideas as to how to do this using jquery? This is what I've tried.

$('document').ready(function(){
  $('.my_class').mouseenter(function(){
    var id = $(this).attr("id");
    $("#"+ id +" div").fadeTo("fast", 1);
    $("#"+ id +" div").mouseleave(function(){
      $("#"+ id +" div").fadeTo("fast", 0);          
    });
  });
});

Answer 1

Inside the mouseenter callback just use $(this).find to find only the div within it.

Adding the mouseleave callback within the mouseenter callback is a bad idea. that will add a new callback every time the mouse enters the parent div.

Is this what you're trying to do?

http://jsfiddle.net/2R3Yt/

$('document').ready(function () {
    $('.my_class').mouseenter(function () {
        var id = $(this).attr("id");
        $(this).find("div").fadeTo("fast", 1);
    });

    $('.my_class').mouseleave(function () {
        $(this).find("div").fadeTo("fast", 0);
    });
});

Answer 2

Id rewrite it to something like:

$('document').ready(function(){
 $('.my_class').mouseenter(function(){$(this).fadeTo("fast", 1);});
 $('.my_class').mouseleave(function(){$(this).fadeTo("fast", 0);});
});

You are attaching the mouseleave inside the mouseenter and I guess you didn't wont that.

Answer 3

The original code was working for me, however; the events continuously fade the overlays in and out if you move your cursor erratically between divs .

To fix that, I replaced the original mouseenter and mouseleave events with one which is similar to on but only catches on the event once.

$('.my_class').one('mouseenter', function() {...});
$('.my_class').one('mouseleave', function() {...});

I then put the mouseenter event inside the mouseleave so we can continue doing the hover effect on the after we leave the active div.

http://jsfiddle.net/q8qFy/4/

If you're interested CSS only solution:

http://jsfiddle.net/EsVLC/1/

Answer 4

I think this solution may be a bit tidier. Also have a fiddle .

$('.my_class').mouseenter(function() {
    $(this).children('.overlay').fadeTo(1000, 0);
})

$('.my_class').mouseleave(function() {
    $(this).children('.overlay').fadeTo(1000, 1);
})