jQuery replace text of element on hover

hover, jquery, replace

Solution

$('.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

Problem

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!"); }); ```

Original source