鼠标hover时更改内容并在mouseout后恢复

我有一个带有一些文本的DIV，想要在鼠标hover时更改文本，并在mouseout后恢复文本。 喜欢以下。

Text of Mouseout

Text of Mouseover

我尝试按照以下方式执行此操作，但鼠标hover时文本更改但在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); } ); 

现场演示

 ​ 

Answer 2

您必须在hoverfunction之外定义$original变量

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

看看这个jsfiddle