如何在鼠标悬停时附加外部链接（字体）图标答案

【问题标题】：How to append external link (font) icon on mouse hover如何在鼠标悬停时附加外部链接（字体）图标
【发布时间】：2019-06-10 03:20:24
【问题描述】：

是否可以使用 jQuery 扫描所有链接，然后追加一个 external link (font) icon 到所有具有现有 target = "_blank" 属性的 <a> 元素，但仅限于悬停? （这些不一定是外部链接，只是在新标签页上打开的链接。）如果可能，缓动图标的外观将是首选。

感谢您的帮助！

【问题讨论】：

标签： jquery css jquery-hover

【解决方案1】：

您可以在链接上使用hover 函数。对于图标，使用font-awesome:

$("a").hover(function() {
    // Add your code inside if condition if you want to check target = '_blank' attribute
    // var attr = $(this).attr('target');
    // if (typeof attr !== typeof undefined && attr !== false) {
    // }
    $(this).attr('href', 'https://www.google.com'); //Your URL internal or external.If you don't want manual URL, add desire URL on data attribute and take URL from there.
    $(this).addClass('fa fa-link');

  },
  function() {
    $(this).attr('href', '#'); //Your URL
    $(this).removeClass('fa fa-link');

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a target='_blank' href='#'>Link</a>

Check other icons of fontawesome.

【讨论】：