Hide anchors until mouseover

_js/behaviors/anchors.js

@@ -5,7 +5,7 @@ const DEFAULTS = {
   // select elements to put anchor on
   rule: 'h2[id]',
   // class name for anchor
-  cls: 'local-anchor',
+  className: 'local-anchor anchor',
   // text of anchor
   text: '#',
   // append before or after innerText?
@@ -18,11 +18,11 @@ const DEFAULTS = {
 
 onmount('[data-js-anchors]', function () {
   const data = JSON.parse(this.getAttribute('data-js-anchors') || '{}')
-  const rules = Array.isArray(data) 
+  const rules = Array.isArray(data)
     ? (data.length ? data : [DEFAULTS])
     : [Object.assign({}, DEFAULTS, data)]
 
-  for (const { rule, cls, text, shouldAppend } of rules) {
+  for (const { rule, className, text, shouldAppend } of rules) {
     for (const el of this.querySelectorAll(rule)) {
       if (!el.hasAttribute('id')) {
         continue
@@ -31,7 +31,7 @@ onmount('[data-js-anchors]', function () {
       const id = el.getAttribute('id')
       const anchor = document.createElement('a')
       anchor.setAttribute('href', `#${id}`)
-      anchor.setAttribute('class', cls)
+      anchor.setAttribute('class', className)
       anchor.innerText = String(text || DEFAULTS.text)
 
       if (shouldAppend) {

_sass/2017/components/h2-section.scss

@@ -13,4 +13,13 @@
       margin-top: 48px;
     }
   }
+
+  /* Hide anchors until mouseover */
+  & > .anchor {
+    opacity: 0;
+  }
+
+  &:hover > .anchor {
+    opacity: 1;
+  }
 }