javascript - jQuery 鼠标进入/离开

Question

我在 html 中有这段代码:

<div class="sub-status">
    <p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>

悬停时，我希望将其更改为:

<div class="sub-status">
    <p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>

而且，我在 jQuery 中有这段代码:

$(document).ready(function() {
    $('.sub-status').mouseenter(function() {
        $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
    });
    $('.sub-status').mouseleave(function() {
        $('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
    });
});

第一个功能运行良好。当我将鼠标悬停在那个 div 上时，它被更改为我想要的，但是 mouseleave 不起作用。我希望当我将鼠标移出那个 div 时，它的数据会恢复到以前的状态。我无法正常工作。任何帮助将不胜感激。

谢谢。

Answer 1

改变

$('this')...

到

$(this)...

你可以使用 hover()而不是使用两个单独的函数:

$('.sub-status').hover(function() {
    $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
    $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});

已更新

您的 fiddle 不起作用，因为您正在更新悬停元素的全部内容 - 仅更新 <p> 中的文本应该可以。

$('.sub-status').hover(function() {
  $(this).children('p')
              .removeClass()
              .addClass('unsubscribed')
              .html("<i>X</i> Unsubscribe");
  },function() {
     $(this).children('p')
               .removeClass()
               .addClass('subscribed')
               .html("<i class='icon-check'></i> Subscribed");
});

Working fiddle