jQuery replace text of element on hover

Question

With jQuery, I'm trying to replace the text, including the span, inside these links on hover. Then when the user hover's off, the original text is displayed again.

<a class="btn" href="#">
    <img src="#" alt=""/>
    <span>Replace me</span> please
</a>

<a class="btn" href="#">
    <img src="#" alt=""/>
    <span>Replace me</span> please
</a>

The final output should be

<a class="btn" href="#">
    <img src="#" alt=""/>
    I'm replaced!
</a>

I'm toying around with but not sure how to replace it back. Any ideas?

$('.btn').hover(function(){
    $(this).text("I'm replaced!");
});

This would be much easier if all the content to be replaced was inside some element. — Jon
– Jon, Commented May 22, 2012 at 11:30

Fabrizio Calderan · Accepted Answer · 2019-03-01 22:10:25Z

25

$('.btn').hover(
    function() {
        var $this = $(this); // caching $(this)
        $this.data('defaultText', $this.text());
        $this.text("I'm replaced!");
    },
    function() {
        var $this = $(this); // caching $(this)
        $this.text($this.data('defaultText'));
    }
);

you could save the original text in a data-defaultText attribute stored in the node itself so to avoid variables

edited Mar 1, 2019 at 22:10

answered May 22, 2012 at 11:30

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

3 Comments

Andrew Willis Over a year ago

you posted this 43 seconds before me, but the funny thing is, my internet went down for a split second when I clicked send and I had to input a captcha when I sent it

Dikeneko Over a year ago

Personally, this replace it, but then when the mouse goes out, it still keeps the new text!

olieidel Over a year ago

Note that the key in the html node must be kebab-cased, in this example: <div class="btn" data-default-text="foobar">

Andrew Willis · Accepted Answer · 2012-05-22 11:31:01Z

5

This should do the trick

$(function(){
  var prev;    

  $('.btn').hover(function(){
  prev = $(this).text();
      $(this).text("I'm replaced!");
  }, function(){
      $(this).text(prev)
  });
})

answered May 22, 2012 at 11:31

Andrew Willis

2,3573 gold badges29 silver badges53 bronze badges

Comments

optimusprime619 · Accepted Answer · 2012-05-22 11:33:22Z

1

add another function to the hover event like this:

$('.btn').hover(function(){
    $(this).text("I'm replaced!");
}, function() {
    $(this).text("Replace me please");
});

Link for demo

answered May 22, 2012 at 11:33

optimusprime619

7642 gold badges18 silver badges39 bronze badges

1 Comment

optimusprime619 Over a year ago

wow now i realize how slow i am... and a jsfiddle link was a bad idea here :'(

sloth · Accepted Answer · 2012-07-14 15:42:18Z

1

$('.btn').hover(function() {
    // store $(this).text() in a variable     
    $(this).text("I'm replaced!");
},
function() {
    // assign it back here
});

edited Jul 14, 2012 at 15:42

sloth

101k21 gold badges182 silver badges224 bronze badges

answered May 22, 2012 at 11:31

Ajinkya

22.7k33 gold badges113 silver badges164 bronze badges

Comments

Mathew Thompson · Accepted Answer · 2012-05-22 11:31:49Z

0

You'd need to store it in a variable in order to set it back to what it was, try:

var text;

$(".btn").hover(function () {
    text = $(this).text();
    $(this).text("I'm replaced!");
},
function () {
    $(this).text(text);
});

answered May 22, 2012 at 11:31

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Collectives™ on Stack Overflow

jQuery replace text of element on hover

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related