This post will take less than a minute to read.
Recently I took part in a conversation regarding a button appearing when a user hovered over a div. This was currently being achieved by setting
display: none; on the button and then changing that to
display: block; on hover.
The problem with using
display: none; in this case is that it removes the button from the flow of the document. This would not be noticeable in most cases but as you can see here, if there is content below the element being hidden then it becomes quite an issue.
The solution is simple. By using
visibility: hidden; we keep the button in the flow of the document and we can show it again by setting
visibility: visible; on the hover state.