Javascript jquerymouseenter/leave

我有以下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>

X退订

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

$（文档）.ready（函数（）{
$（'.sub status'）.mouseenter（函数（）{
$（this.html（“
X unsubscribe
”）；
});
$（'.sub status'）.mouseleave（函数（）{
$（'this'）.html（“
subscribed
”；
});
});

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

谢谢。

换衣服

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

$（'.sub status'）。悬停（函数（）{
$（this.html（“
X unsubscribe
”）；
}，函数（）{
$（this.html（“
subscribed
”）；
});

已更新

您的小提琴不工作，因为您正在更新悬停元素的全部内容。。。只需更新

中的文本即可

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

$（'.sub status'）。悬停（函数（）{
$（this.children（'p'））
.removeClass（）
.addClass（'取消订阅'）
.html（“X取消订阅”）；
}，函数（）{
$（this.children（'p'））
.removeClass（）
.addClass（“已订阅”）
.html（“认购”）；
});

---

尝试使用悬停功能：

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

$（“.sub status”）。悬停(
函数（）{
$（this.html（“
X unsubscribe
”）；
},
函数（）{
$（this.html（“
subscribed
”）；
}
);

---

将

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

$（文档）.ready（函数（）{
$（'.sub status'）.mouseenter（函数（）{
$（this.html（“
X unsubscribe
”）；
}).mouseleave（函数（）{
$（this.html（“
subscribed
”）；
});
});

在这里，试试这个。工作演示：

$（文档）.ready（函数（）{
$（'.sub status'）。在（“mouseenter”，function（）上{
$（this.find（“p”）.prop（“class”，“unsubscribed”）.html（“X Unsubscribe”）；
}).on（“mouseleave”，函数（）{
$（this.find（“p”）.prop（“class”，“subscribed”）.html（“subscribed”）；
});
});

我不鼓励使用hover（），因为它会触发大量的执行，在本例中这是不必要的。

大量的执行..

？？你能解释一下吗？？？@bipen在你的悬停函数中放一个console.log，看看在console@php_nub_qq我看不出mouseenter/mouseleave有什么不同。你能详细说明一下hover可能会遇到的问题吗？@php\u nub\u qq。。你有没有试过用单独的函数…就像你在回答中所做的那样？？yes

hover（）是$（选择器）.mouseenter（handlerIn.mouseleave（handlerOut）的缩写没有区别它不再工作了。我得到了同样的效果。文本在mouseenter上更改，但在我离开后不会更改。谢谢，这就是我要找的。我刚把退订的课程改成退订和优秀。非常感谢。@smerny，真奇怪
$(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>");
    });
});

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