使用 JQuery 更改悬停上的文本答案

【问题标题】：Change text on Hover using JQuery使用 JQuery 更改悬停上的文本
【发布时间】：2013-08-19 00:34:11
【问题描述】：

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

但是，它会永久隐藏我的原始文本。有谁知道我做错了什么？（总的来说，我对 JQuery/JS 非常陌生）

【问题讨论】：

我能否确切地问一下您在该示例中要对列表元素做什么？只需为每个添加一个悬停状态？

标签： javascript jquery html

【解决方案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;
}

【讨论】：

这取决于 OP 的浏览器要求（没有提及任何名称……）caniuse
确实如此，但我认为可以肯定地说，浏览器对 IE7 的支持是一个越来越奇特的要求。
我同意 - 只是想我会提一下，以防 OP 有正当理由请求 jQuery/Javascript 解决方案。

【解决方案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);
    }
  );
});

希望这会有所帮助谢谢

【讨论】：

【解决方案3】：

我同意@Nirazul，如果可以，请选择纯 css 解决方案。

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

获取li的属性值a
将所选 li 内的链接文本替换为其内容
在 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。

【讨论】：