鼠标悬停时更改内容，鼠标移除后恢复 [英] Change content on mousehover and Restore after mouseout

问题描述

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

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> Mouseout的文本< / div>

< div class =test>鼠标悬停的文本< / 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);
  }
);

推荐答案

$("div.test").hover(

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

现场演示

Live Demo

​

这篇关于鼠标悬停时更改内容，鼠标移除后恢复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！