Display: None; vs. Visibility: Hidden;

Display- None; vs. Visibility- Hidden;

This post will take less than a minute to read.

Recently I took part in a con­ver­sa­tion regard­ing a but­ton appear­ing when a user hov­ered over a div. This was cur­rently being achieved by set­ting display: none; on the but­ton and then chang­ing that to display: block; on hover.

The prob­lem with using display: none; in this case is that it removes the but­ton from the flow of the doc­u­ment. This would not be notice­able in most cases but as you can see here, if there is con­tent below the ele­ment being hid­den then it becomes quite an issue.

The solu­tion is sim­ple. By using visibility: hidden; we keep the but­ton in the flow of the doc­u­ment and we can show it again by set­ting visibility: visible; on the hover state.

Tweet this