mouseenter/mouseleave variable question

mouseenter/mouseleave variable question


I have a menu which displays text for each link (e.g. Link 1, Link 2, Link 3 etc) and when I hover over the link, I change the text of the link for an image.  The image is different for each link so i have so far got the first part working where the text changes for the image but I need to get th eimage to change back to the text when i "mouseleave".

When I "mouseleave" on my function below, it breaks indicating that "whichone" and "originaltext" variables do not exist.  Can you help fix my problem?

Many thanks for reading.

  1.     $('#dynamic-submenu').on({
            mouseenter: function () {
                var whichone = $(this).attr('id').split("_")[1]; // the image name is stored as the ID
                var originaltext = $(this).html(); // store the original link text
                var newHTML = $(this).html().replace(originaltext,'<img src="/images/cars/'+whichone+'" />');
            mouseleave: function () {
                var newHTML = $(this).html().replace('<img src="/images/cars/'+whichone+'" />',originaltext);
        }, 'li a');   

    • Topic Participants

    • kris