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

Posted 2023-05-08

【中文标题】在悬停时更改文本并替换为原始文本

【英文标题】：Change text on hover and replace with original

【发布时间】：2013-09-22 11:47:13

【问题描述】：

我有一个可以使用 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。

【参考方案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 并从此过上幸福的生活。

【讨论】：

这不是我所追求的，但为我指明了正确的方向。谢谢。

很高兴它有帮助。如果您想更新上面的代码，我很乐意看到最终结果。