CSS: Is a hidden object clickable?

css visibility display
euphoria83 picture euphoria83 · Apr 14, 2011 · Viewed 41.7k times · Source

If the visibility property of the style of an HTML element is set to hidden, is it still clickable?

When the display property is set to none, the element is not even part of the DOM tree, so that is not a problem. But I was wondering if a hidden element still responds to mouse events.

Answer

alex picture alex · Apr 14, 2011

With display: none it is still part of the DOM. It just isn't rendered in the viewport.

As for clicks on elements with visibility: hidden, the events are not fired.

jsFiddle.

$('div').click(function() {
    alert('Hello')
});
div {
    width: 100%;
    height: 100%;
    visibility: hidden; 
}
<div>abc</div>

Related questions

What is the difference between visibility:hidden and display:none?

The CSS rules visibility:hidden and display:none both result in the element not being visible. Are these synonyms?

Read More
Equivalent of jQuery .hide() to set visibility: hidden

In jQuery, there are .hide() and .show() methods which sets the CSS display: none setting. Is there an equivalent function which would set the visibility: hidden setting? I know I can use .css() but I prefer some function like .hide() …

Read More
Make one div visible and another invisible

I have two div tags, one is for the search and the other is for the results. What I need is for when the submit button is clicked the results are returned and placed into the results div (with an …

Read More