Changing text onhover using jQuery

Question

I have a div with the text 'one' inside of it. When you hover over it, I want to change the text to 'two', and when you stop hovering over it, I want to change the text back to 'one'. I tried to do this using jQuery, but after it change into 'two', it doesn't change back to 'one' once you stop hovering over it. What am I doing wrong?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).replaceWith("two");
        }, function(){
        $(this).replaceWith("one");
    });
});
</script>

<p>one</p>

Possible duplicate of jQuery replace text of element on hover — swidmann
– swidmann, Commented Oct 10, 2015 at 19:34

KAD · Accepted Answer · 2015-10-10 19:32:18Z

3

Use text(), since replaceWith() will replace the whole element, and you are replacing it with a text and not an element so the selection of the element is being lost the next time.

$(document).ready(function(){
    $("p").hover(function(){
        $(this).text("two");
        }, function(){
        $(this).text("one");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<p>one</p>

edited Oct 10, 2015 at 19:32

answered Oct 10, 2015 at 19:17

KAD

11.2k4 gold badges34 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

frosty Over a year ago

How come this doesn't work? $(this).text("two").fadeIn(3000);

Anonymous0day Over a year ago

because it is already visible ! maybe fadeOut() ? or try $(this).text("two").hide().fadeIn(777);

frosty Over a year ago

@Anonymous0day Ha! So, hide it, and then make it fadeIn! Smart!

Prabhat Kushwaha · Accepted Answer · 2015-10-10 19:21:11Z

0

$(document).ready(function(){
    $("p").hover(function(){
        $(this).html("two");
        }, function(){
        $(this).html("one");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<p>one</p>

answered Oct 10, 2015 at 19:21

Prabhat Kushwaha

12 bronze badges

Collectives™ on Stack Overflow

Changing text onhover using jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related