Question

I try to do this image effects: http://coverdesign.ro/teste/lore/ but sometimes when the mouse move from one object to another it lose the hover state;
I use this js script:

 $(function () {

  $('div.fade').hover(function() {
        fade = $('> div', this);
        nume = $(this).attr('id');
        $("."+nume).addClass("mselect");
        if (fade.is(':animated')) {
            fade.stop().fadeTo(250, 1);
        } else {
            fade.fadeIn(1000);
        }
    }, function () {
       /* var fade = $('> div', this);
        var nume = $(this).attr('id');*/
        $("."+nume).removeClass("mselect");
        if (fade.is(':animated')) {
            fade.stop().fadeTo(250, 0);
        } else {
            fade.fadeOut(500);
        }
    });


        $('#menu a').hover(function() { 
        var nume = $(this).attr('class'); 
        var fade = $('#'+nume+' > div');
        //$("."+nume).addClass("mselect");
        if (fade.is(':animated')) {
            fade.stop().fadeTo(250, 1);
        } else {
            fade.fadeIn(2000);
        }
    }, function () {
        var nume = $(this).attr('class'); 
        var fade = $('#'+nume+' > div');
        if (fade.is(':animated')) {
            fade.stop().fadeTo(2000, 0);
        } else {
            fade.fadeOut(2000);
        }
    });
});

What actually happens is, sometimes when the mouse is moved from the cat to the phone, the hover does not get activated. If you play around with the page you will realise that the color change of the cat and the phone, sometimes does not happen due to hover state being lost.

Answer 1

I guess this line of code

$('div.fade').hover(function() {

is causing a problem in identifying the proper div. You could try uniquely identifying each menu item/image and handle it accordingly.