Anchor link by hovering the whole heading

[xplosionmind]

Hi, I’m sort of a noob and I don’t know if this is the right place to ask this question, but since I’m using this (awesome) tool to create my anchor links I’m gonna post it here.

If I make the anchor body invisible and make it appear only on :hover, is there a way to make it appear by hovering the heading text (like it is on GitHub) instead of having to hover on the empty spot?

Thanks a lot!

[allejo]

Sure, just attach your :hover rule to the heading and give the anchors inside an opacity of 1.

<h1>My Heading <a href="#">#</a></h1>

Sass

// styles.scss
h1, h2, h3,
h4, h5, h6 {
  &:hover {
    a {
      opacity: 1;
    }
  }

  a {
    opacity: 0;
  }
}

CSS

// styles.css
h1:hover a, h2:hover a, h3:hover a,
h4:hover a, h5:hover a, h6:hover a {
  opacity: 1;
}
h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
  opacity: 0;
}