Question

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

＆＃13;

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

＆＃13;

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

'$（＆＃34;选择器＆＃34）的mouseenter（函数（）{。 $（本）.addClass（＆＃34;有源＆＃34）; }）

$（＆＃34;选择器＆＃34）。鼠标离开（函数（）{ $（本）.removeClass（＆＃34;有源＆＃34）; }）`

mouseleave jquery返回原始样式的最佳方法是什么？

3 个答案: