Search code examples
cssvisibilitydisplay

CSS: Is a hidden object clickable?

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.

Solution

  • 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>