Question

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

<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);
  }
      );

<强> Live Demo

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

2 个答案: