javascript - 使用 .hover() 时如何用链接标记替换文本？

Question

我正在尝试在网站的导航栏中创建一个“联系人”部分(使用 jQuery)，其中包括 <a>Instagram</a>和<a>Email</a>但只有当我将鼠标悬停在 #contact 上时才会出现。

到目前为止，我只能将鼠标悬停在 #contact 上时显示字符串。 .

HTML:

<span id="contact">CONNECT</span>

jQuery:

$("#contact").hover(function(){
  $(this).text(function(i, text){
    return text === "CONNECT" ? "Instagram | Email" : "CONNECT";
  })
});

我怎样才能让“Instagram”和“电子邮件”成为链接？

我尝试过这个:

$("#contact").hover(function(){
    $(this).text(function(i, text){
        return text === "CONNECT" ? "<a>Instagram</a> | <a>Email</a>" : "CONNECT";
    })
});

但是当我悬停时，我得到了 "<a>Instagram</a>"和"<a>Email</a>"作为字符串而不是链接。

任何帮助将不胜感激!

Answer 1

如果需要设置 HTML 而不是 .text()，则需要使用 .html() 进行更新。

jQuery(function($) {
  $("#contact").hover(function() {
    $(this).html(function(i, text) {
      return $(this).text() === "CONNECT" ? "<a>Instagram</a> | <a>Email</a>" : "CONNECT";
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="contact">CONNECT</span>