Question

This code

$(document).ready(function(){
    $(".one").hover(
        function(){
            $(".overlay").fadeTo(200,1).show();
        },
        function(){
            $(".overlay").delay(500).fadeTo(200,0);
        }
    ); 
});

overlays a second DIV on top of the first, but breaks for multiple instances on the same page. I think I need to put a $(this). in there somewhere but can’t figure out where.

Any help is appreciated.

Answer 1

You could access it by traversal. Assuming it is a child of the element ‘one’, this will only apply the effect to children named ‘overlay’ of the hovered element ‘one’.

$(".one").hover(
    function(){
        $(this).children(".overlay").fadeTo(200,1).show();
    },
    function(){
        $(this).children(".overlay").delay(500).fadeTo(200,0);
    }
);

Heres a reference of jQuery tree traversal.