jquery - マウスオーバーでコンテンツを変更し、マウスアウト後に復元する

Question

テキストを含む DIV があり、マウスオーバーでテキストを変更し、マウスアウト後にテキストを復元したいと考えています。次のように。

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

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

次のようにしようとしましたが、マウスオーバーするとテキストが変更されますが、マウスアウト後に復元されません:

$(".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);
  }
      );

ライブデモ

​

Answer 2

$originalホバー関数の外で変数を定義する必要があります

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

このjsfiddleをチェックしてください