在悬停时更改文本并替换为原始文本

Question

我有一个可以使用 jQuery 打开和关闭的 div。悬停时链接文本需要更改，因此如果 div 打开，文本将显示“关闭”，反之亦然。但是，我不知道如何在鼠标移出时将链接文本返回到其原始值（例如，在 example jsFiddle 中，文本在未悬停时应更改回 Hello）。

有什么想法吗？

HTML：

<div>
     <h4>HELLO</h4>

    <p>Loads of interesting content etc</p>
    <p>Loads of interesting content etc</p>
    <p>Loads of interesting content etc</p>
    <p>Loads of interesting content etc</p>
</div>

JS：

$("h4").click(function () {
    var par = $(this).parent();
    par.children("p").slideToggle(500);
    if (par.hasClass("closed")) {
        par.animate({
            height: 180
        }, 500);
    };
    if (!par.hasClass("closed")) {
        par.animate({
            height: 30
        }, 500);
    };
    par.toggleClass("closed");


    });

    $("h4").hover(
        function () {
             if ($(this).parent().hasClass("closed")) {
                  $(this).html("OPEN");
             } else {
                $(this).html("CLOSE");
             }
       },

function () {
    //how do I get back the original value on mouseout?
});

编辑：我得到的解决方案是here。

Answer 1

在 html 中这样做：

<h4><span class="ninja">CLOSE</span><span>OPEN</span></h4>

在你的 CSS 中这样做：

.ninja { display:none; }

在您的 JS 中，在悬停（或更好的是在 ('mouseenter,mouseleave') 事件上执行此操作

$(this).find('span').toggleClass('ninja');

应该会得到想要的效果。

我的建议是，当点击事件触发时，不要使用悬停事件，然后切换类。这样它就一直正确显示。

编辑：关于 .on() 替代方案（鼠标进入，鼠标离开）

$('h4').on('mouseenter,mouseleave',function(){
    $(this).find('span').toggleClass('ninja');
});

EDIT EDIT 否则你将不得不有一个 .blur() 事件，这似乎比这里需要的代码更多。我建议用上面的 .on 替换你的 .hover 并从此过上幸福的生活。