使用JQuery在Hover上更改文本

Question

我正在尝试将导航元素从“ME”更改为＆lt; ME＆gt;在使用JQuery悬停时。这是我正在尝试的： JSBin example

然而，它永久隐藏了原始文本。有没有人知道我做错了什么？ （我一般都是JQuery / JS的新手）

Answer 1

no js required的经典案例，你可以使用CSS伪类，特别是：

• :hover
• :before
• :after

的 Example

li a:before {
    content: "<";
    display: none;
}

li a:after {
    content: ">";
    display: none;
}

li a:hover:before {
    display: inline;
}

li a:hover:after {
    display: inline;
}

Answer 2

DEMO

试试这个。我已经编辑了你的代码

$( function() {
  var text;
  $("#topnav li ").hover(
    function () {
      text=$(this).find("a").text();
     $(this).find("a").text($(this).attr('full'));
    },
    function () {
       $(this).find("a").text(text);
    }
  );
});

希望这会有所帮助 谢谢

Answer 3

我同意@Nirazul，如果可以，请寻求纯粹的CSS解决方案。

如果你不能，请记住你是：

1. 获取li
的属性的值a
2. 将所选li内部链接的文本替换为其内容
3. 在handlerOut上撤消操作

所以：

$( function() { 
  $("#topnav li").hover(
    function () {
      var myLi = $(this);
      myLi.attr('small', $('a', myLi).text());
      $('a', myLi).text(myLi.attr('full'));
    },
    function () {
       var myLi = $(this);
       $('a',myLi).text(myLi.attr('small'));
    }
  );
});

更新了example。