javascript - 将鼠标悬停在链接上时更改 div 内容？

Question

我想在将鼠标悬停在其他文本上时更改 div 的文本。

如何使用 JavaScript 或 jQuery 做到这一点？

<a href="#">change your div text</a>
<div class="original">
   <p class="old">this is my first quesstion on stackoverflow and i hope to be solved</p>
</div>

<p class="new"> the new text i want to add</br>
i will use big text really and i want to change it</p>

当鼠标悬停在上面的链接上时，如何用新的 p 类替换旧的 p 类，以及当悬停停止？

Answer 1

如果您想使用 jQuery，您可能会寻找 .hover()功能。

当鼠标进入(和退出)元素时，它接受一个或两个处理程序。

var old = $(".old").html();
var now = $(".new").html();
$("a").hover(function(){
    $(".old").html(now);
}, function(){
    $(".old").html(old);
});

这会将原始文本存储在 old 中，将新文本存储在 now 中(new 是保留字)。 mouseenter 处理程序将文本更改为新文本，mouseexit 处理程序将其更改回原始文本。

为此，您需要将新文本设置为隐藏(请参阅演示)。

Demo