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

您必须$original在悬停功能之外定义变量

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

看看这个jsfiddle

Answer 2

$("div.test").hover(

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

现场演示

​