使用 .hover() 时如何用 link 标签替换文本?

How do you replace text with a link tag when using .hover()?

我正在尝试在包含 <a>Instagram</a><a>Email</a> 的网站(带有 jQuery)的导航栏中创建一个 "contact" 部分,但只显示当我将鼠标悬停在 #contact 上时。

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

HTML:

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

jQuery:

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

我怎样才能做到 "Instagram" 和 "Email" 是链接?

我试过这个:

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

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

如有任何帮助,我们将不胜感激!

如果您需要设置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>

我认为这样做的一个好方法是创建两个 link 元素并将它们附加到 "CONNECT" 跨度,如下所示:

$("#contact").hover(
  function(){
    $( '#contact' ).empty();//Remove everything

    $("<a>", {
    text: 'Instagram',
    title: "Instagram",
    href: "www.instagram.com"
    }).appendTo( '#contact' );

    $("<span>", {
    text: ' | ',
    }).appendTo( '#contact' );

    $("<a>", {
    text: 'Email',
    title: "Email",
    href: "mailto:name@gmail.com"
    }).appendTo( '#contact' );  
},function(){
    $( '#contact' ).empty();//Remove everything
    $( '#contact' ).text("CONNECT");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="contact">CONNECT</span>