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

<强>更新

你的小提琴不起作用，因为你正在更新悬停元素的整个内容...只更新<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

Answer 2

在这里，试试这个。工作演示：http://jsfiddle.net/XrYj4/3/

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

Answer 3

尝试使用悬停功能：

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

http://api.jquery.com/hover/

Answer 4

将'this'更改为this。同时考虑链接，如下所示，这可以帮助使用较弱设备的用户加载更快的内容。

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

jQuery mouseenter / leave

4 个答案: