create a button to id that showing on hover in <div> (css)

Issue

I want to create a button like README.md (GitHub), when hover on # headline it will show a button link to the that id, image.

I tried with html:

<div id="headline"><a href="#headline" class="to">#</a> HEADLINE</div>

css:

a.to {
   display: none;
}

#headline:hover + a.to {
   display: block;
}

but it's not work

Solution

This is how it's done. You were close, but the + combinator only works with adjacent elements. Since the a tag is a descendant of the div, there would be no need for a combinator.

.to{
  visibility: hidden;
}

#headline:hover .to{
  visibility: visible;
}

<div id="headline"><a href="#headline" class="to">#</a> HEADLINE</div>

One more thing, to scroll within the DOM, the href attribute would have a # followed by the id of the target element. So to scroll to the div of id "headline", the href attribute's value would be #headline.

Answered By - Khalid Fazal