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
});

Store the html (`eye_disease1.html()`) and restore it. But I dont think that is the best way. If you are aiming for tooltips, maybe have a hidden HTML which gets revealed on mouseover. That way you have the tooltip-content inside your html. — Jonathan, May 06 '15 at 05:41

Tushar · Accepted Answer · 2015-05-06T05:54:47.083

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);
});

braks · Answer 2 · 2015-05-06T06:00:40.083

var eye_disease1=$('#eye_disease1');
var eye_disease1_html;
eye_disease1.hover(
  function() {
    eye_disease_1_html = eye_disease1.html();
    eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>')
    .fadeOut(0)
    .css('border','none')
    .fadeIn(400);
  }, function() {
    eye_disease1.find('span.show_li, span.show_li_2')
    .fadeOut(400)
    .delay(400)
    .html(eye_disease1_html)
    .fadeIn(0);
  }
);

But yeah I would prefer to have all the content inside (original, and the hovered content) there the whole time.

HTML:

<div id="eye_disease1">
    <div class="original-content">
        Original Content
    </div>
    <div class="hovered-content">
        <span class="show_li">symptoms</span>
        <span class="show_li_2">diseases</span>
    </div>
</div>

CSS:

.hovered-content {
    display: none;
}

.hovered {
    border: none;
}

JS:

$('#eye_disease1').hover(
  function() {
    $(this).addClass("hovered");
    $(this).find(".original-content").fadeOut();
    $(this).find(".hovered-content").fadeIn();
  }, function() {
    $(this).removeClass("hovered");
    $(this).find(".hovered-content").fadeOut();
    $(this).find(".original-content").fadeIn();
  }
);

You can see it here: https://jsfiddle.net/waga7Lu1/3/ The transition effect is a bit clumsy but I'm not really sure what you're after.

score 0 · Answer 3 · answered May 06 '15 at 05:50

0

You can all use the addClass

`$("selector").mouseenter(function(){ $(this).addClass("active"); })

$("selector").mouseleave(function(){ $(this).removeClass("active"); })`

answered May 06 '15 at 05:50

Mitul

3,431
2
22
35

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

3 Answers3