Search code examples
jqueryimagemouseentermouseleave

mouseenter and mouseleave dont work in jquery

I am testing my website adding some jQuery interaction. I created this script:

$(document).ready(function() {
    $('.flash').on({
        mouseenter: function (
            $('.flash').hide();
    },
    mouseleave: function  {
        $('.flashOn').show();
    }
});

Very simply to fire the flash: http://www.paolobergomi.it/sitob/index.html but actually I don't have any clue why doesn't work. I debugged a lot but is the same. The div are correctly placed in HTMLas you see, the script is ok (i think) but it wont work, any clue is welcome.

Solution

  • mouseenter and mouseleave work fine in jQuery when you use the correct syntax:

    $('.flash').on({
    mouseenter: function() {
        $('.flashOn').hide();
    },
    mouseleave: function() {
        $('.flashOn').show();
    }
});

    Example fiddle

    I am also assuming that the mouseenter handler should hide the .flashOn element?