what is the best way to return the orginal style when mouseleave jquery?

Question

I use mouseenter to input a new html. I face a challenge that I need to return the original style when mouse leave? When mouseleave, I need to remove the new html and use the original html What is the best way to do that?

var eye_disease1 = $('#eye_disease1');
eye_disease1.mouseenter(function () {
    eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
    eye_disease1.css('border', 'none');
}).mouseleave(function () {
    // what should I put here to return the original
});

Answer 1

Get the original HTML of eye_disease1 before changing and after mouse leave update HTML.

var eye_disease1 = $('#eye_disease1'),
    diseaseHtml = '';

eye_disease1.mouseenter(function () {
    if (!diseaseHtml) {
        diseaseHtml = eye_disease1.html();
    }
    eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
    eye_disease1.css('border', 'none');
}).mouseleave(function () {
    diseaseHtml = '';
    eye_disease1.html(diseaseHtml);
});