How is visibility hidden different from display none ? [Solved] | Sololearn: Learn to code for FREE!

+2

How is visibility hidden different from display none ? [Solved]

I am trying to interact with the element which isn't visible but none of the above property helped me but opacity worked well since the element was still there. But i thought visibility hidden would do the same, though after going through some online answers i am more confused about how visibility hidden and even display none works , so if anyone can explain, please !

css

2/21/2021 5:54:47 PM

Abhay

4 Answers

New Answer

+1

When visibility is hidden, you cannot interact with the invisible element. It cannot receive focus and hover events don't work too. It's basically like display:none except that the invisible element still maintains its space in the layout.

+1

Mirielle[ INACTIVE ] if the element is still there then I should be able to interact with it , right ?

+1

Ore thank you.

0

Visibility: hidden = the element is still there but hidden i.e when you check the source code, you still find the element Display: none = the element has been removed completely from the document. If you check the source code, you won't find it there