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

Question

I want to change the text of a div when hovering over other text.

How do I do it with JavaScript or 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>

How can I replace the old p class with the new p class when hovering over the link above and how can I get it to return to the original class when the hovering stops?

Answer 1

If you want to use jQuery, you're likely looking for the .hover() function.

It accepts either one or two handlers for when the mouse enters (and exits) the element.

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

This stores the text of your original in old and the new text in now ( new is a reserved word). The mouseenter handler changes the text to the new text and the mouseexit handler changes it back to the original.

For this to work, you'll need to set your new text to hidden (see demo).

Demo

Answer 2

The answer of @AstroCB is correct.

@Css Man: for your extra requirement, you could use setTimeout method.

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

See demo: http://jsfiddle.net/Teddy_Heaven/42gV5/2/

UPDATE: For new 4 steps require:

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);
    });
});

Demo: http://jsfiddle.net/Teddy_Heaven/42gV5/6/