CODEWITHSUNDEEP
jquerycssjquery-hover
Majal
Majal

Reputation: 1741

How to append external link (font) icon on mouse hover

Is it possible to use jQuery to scan all links and then append an external link (font) icon to all <a> elements with existing target = "_blank" property, but only on hover? (These does not have to be external links, just links that opens on a new tab.) If possible, easing on appearance of the icon would be preferred.

Thanks for the help!

Upvotes: 0

Views: 381

Answers (1)

4b0
4b0

Reputation: 22323

You can use the hover function on link. For icon, use 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.

Upvotes: 1

Related Questions