当 mouseleave jquery 时 return 原始样式的最佳方法是什么？

Question

我使用 mouseenter 输入新的 html。我面临一个挑战，当鼠标离开时我需要 return 原始样式？当 mouseleave 时，我需要删除新的 html 并使用原来的 html 最好的方法是什么？

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

在更改前和鼠标离开更新后HTML获取eye_disease1的原始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);
});

Answer 2

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

但是，是的，我更愿意将所有内容（原始内容和悬停的内容）一直放在那里。

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

你可以在这里看到：https://jsfiddle.net/waga7Lu1/3/ 过渡效果有点笨拙，但我不太确定你想要什么。

Answer 3

你们都可以使用addClass

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

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

当 mouseleave jquery 时 return 原始样式的最佳方法是什么？

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

javascript

jquery

mouseenter

mouseleave