Skip to content

Instantly share code, notes, and snippets.

@dinhanhthi

dinhanhthi/hover_anchor.html

Last active December 10, 2020 10:54
Show Gist options
  • Save dinhanhthi/7c22452738840943dffe3e2a0249cbb7 to your computer and use it in GitHub Desktop.
Save dinhanhthi/7c22452738840943dffe3e2a0249cbb7 to your computer and use it in GitHub Desktop.
Download ZIP
Heading hover anchor link
Raw
hover_anchor.html
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
Raw
hover_anchor.js
$(function() {
return $("h2, h3, h4").each(function(i, el) {
var $el, icon, id;
$el = $(el);
id = $el.attr('id');
icon = '<i class="fa fa-link"></i>';
if (id) {
return $el.append($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));
}
});
});
Raw
hover_anchor.scss
.header-link {
position: inherit;
margin-left: 0.4rem;
opacity: 0;
color: #999;
font-size: 1rem;
font-weight: normal;
-webkit-transition: opacity 0.1s ease-in-out 0.1s;
-moz-transition: opacity 0.1s ease-in-out 0.1s;
-ms-transition: opacity 0.1s ease-in-out 0.1s;
}
h2:hover .header-link,
h3:hover .header-link,
h4:hover .header-link,
h5:hover .header-link,
h6:hover .header-link {
opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment