如何用jQuery实现#intro元素悬停显示双锚点链接、移出恢复原内容

• 原代码里写的*$("#intro").html(link && link2)*是完全不对的：JS的逻辑与运算遇到两个真值的时候，只会返回第二个值，最后页面上只会显示法语跳转链接，英语链接直接被吞了
• 根本没存储#intro本来的介绍内容，鼠标移入把内容换成链接之后，原始内容就丢失了，移出的时候根本找不回来
• mouseleave事件里写的show(slow, this)是无效代码：jQuery没有这种全局的show方法，传的参数也不符合动画API的规则
• 给#intro本身加link link2类的操作毫无意义，类是加在容器上的，不是加在生成的两个标签上，对应样式根本不会生效

修正后的实现逻辑 #

1. 页面刚加载完成时，先把#intro的原始HTML内容缓存到独立变量中，避免内容被替换后无法恢复
2. 鼠标移入元素时，分别创建两个对应语言的跳转锚点，依次填充到#intro容器中替换原有内容
3. 鼠标移出元素时，把之前缓存的原始内容重新塞回容器，配合淡入动画实现平滑过渡效果

$(function() {
  // 提前缓存#intro的原始内容
  const originalIntroContent = $("#intro").html();

  // 鼠标移入交互
  $("#intro").on("mouseenter", function() {
    // 生成英语跳转链接
    const enLink = $("<a>").attr("href", "en.html").text("Welcome!").css("margin-right", "15px");
    // 生成法语跳转链接
    const frLink = $("<a>").attr("href", "fr.html").text("Bienvenue!");
    // 替换容器内容为两个链接
    $(this).html(enLink).append(frLink);
  });

  // 鼠标移出交互
  $("#intro").on("mouseleave", function() {
    // 恢复原始内容并加淡入动画
    $(this).hide().html(originalIntroContent).fadeIn("slow");
  });
});

内容的提问来源于stack exchange，提问作者Afra