jQuery 鼠标进入/离开答案

【问题标题】：jQuery mouseenter/leavejQuery 鼠标进入/离开
【发布时间】：2013-06-21 00:21:54
【问题描述】：

我在 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 时，它的数据将恢复到以前的状态。我无法让这个工作。任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： javascript jquery html

【解决方案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

【讨论】：

我不鼓励使用 hover() 因为这会触发大量的执行，在这种情况下没有必要。
an insane amount of executions.. ??你能解释一下吗？？
@bipen 在你的悬停函数中放置一个console.log，看看控制台会发生什么
@php_nub_qq 我看不出与 mouseenter/mouseleave 有什么区别。您能否详细说明悬停可能出现的问题？
@php_nub_qq ..您是否尝试过使用单独的功能..就像您的答案一样？是的hover() is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut); 没有区别

【解决方案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");
    });
});

【讨论】：

谢谢，这就是我要找的。我刚刚将 UNSUBSCRIBED 类更改为 UNSUBSCRIBE 并且非常好。非常感谢。

【解决方案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/

【讨论】：

它不再工作了。我得到同样的效果。文本在 mouseenter 上更改，但在我离开后没有更改。

【解决方案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>");
    });
});

【讨论】：

@smerny 真奇怪