Question

I have a DIV with some text, want to change the text on mouseover, and restore the text after mouseout. Like following.

<div class="test">Text of Mouseout</div>

<div class="test">Text of Mouseover</div>

I tried to do it like following, but the text change when mouseover but not restore after mouseout:

$(".test").hover(
  function() {
    var $original = $(this).clone();
    $(this).html("Text of Mouseover");
  },
  function() {
    $(this).html($original);
  }
);

Answer 1

$("div.test").hover(

  function () {
       originalText=$(this).text();
    $(this).text('New Text');
  }, 
  function () {
    $(this).text(originalText);
  }
      );

Live Demo

​