0

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

rhyshighrise
  • 15
  • 5

1 Answers1

3

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.

Khalid Fazal
  • 393
  • 2
  • 6
  • wait, can I use the `display: none` instead of `visibility: hidden; ` ? – rhyshighrise Dec 25 '21 at 13:49
  • 1
    `display: none;` will basically remove the element and there won't be white space. So when you hover, the `HEADLINE` text will move right and the `#` will appear. – Khalid Fazal Dec 25 '21 at 13:56
  • `visibility: hidden;` just makes it hidden while still occupying space. Looking at the link you provided, `visibility: hidden;` is the way to go. – Khalid Fazal Dec 25 '21 at 13:58