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

Question

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 !

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.

Answer 2

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

Answer 3

Ore thank you.