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

Question

我正在尝试在包含 <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>" 作为字符串而不是链接。

如有任何帮助，我们将不胜感激！

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>

Answer 2

我认为这样做的一个好方法是创建两个 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>

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

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

javascript

jquery

html

web

jquery-hover