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处理程序将其更改回原始文本。

要实现此目的，您需要将新文本设置为hidden（请参阅演示）。

Demo

Answer 2

@AstroCB的答案是正确的。

@Css Man：对于你的额外要求，你可以使用setTimeout方法。

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

请参阅演示：http://jsfiddle.net/Teddy_Heaven/42gV5/2/

更新：对于新的4个步骤需要：

var old = $(".old").html();
var now = $(".new").html();
$("a").hover(function(){
    $(".old").html(now);
}, function(){
    // make time to change your mouse from <a> to <p> (here is 2s)
    var timer = setTimeout(function() {
        $(".old").html(old);
        // if timeout, unbind (A)
        $(".old").unbind('mouseenter mouseleave');
    }, 2000);

    // if you hover <p>, there are new business (A)
    $(".old").hover(function() {
        clearTimeout(timer);
    }, function() {
        $(".old").html(old);
    });
});

演示：http://jsfiddle.net/Teddy_Heaven/42gV5/6/

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

2 个答案: