mouseenter/mouseleave variable question
Hi
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.
- $('#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+'" />');
$(this).html(newHTML);
},
mouseleave: function () {
var newHTML = $(this).html().replace('<img src="/images/cars/'+whichone+'" />',originaltext);
$(this).html(newHTML);
}
}, 'li a');