+ 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 !

21st Feb 2021, 5:54 PM
Abhay
Abhay - avatar
4 Answers
+ 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.
21st Feb 2021, 9:35 PM
Ore
Ore - avatar
+ 1
Mirielle[ INACTIVE ] if the element is still there then I should be able to interact with it , right ?
21st Feb 2021, 6:21 PM
Abhay
Abhay - avatar
+ 1
Ore thank you.
21st Feb 2021, 9:49 PM
Abhay
Abhay - avatar
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
21st Feb 2021, 6:01 PM
Mirielle
Mirielle - avatar