javascript - 使用 JQuery 更改悬停上的文本

Question

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

但是，它永久隐藏了我的原始文本。有谁知道我做错了什么？（总的来说，我对 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

演示

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

$( 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'));
    }
  );
});

更新示例。