CSS: Is a hidden object clickable?

Question

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.

Unpremeditated

It's completely removed from element flow, but I'm not sure if it's taken out of the DOM tree... – Deshawndesi

You are not quite right about "display: none". The object with "display: none" is still a part of DOM tree (so you can find it by jQuery, for example), but it is not a part of visual tree. – Phile

If you want have object clickable you can use 'opacity' instead. – Hiles

Answer 1

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>

Jape

Does anyone know whether all browsers are compliant with this? I kind of remember that in very old versions of Firefox visibility: hidden elements still fired click events, but maybe I’m confusing this with those elements affecting the layout… – Underdeveloped

Answer 2

Making div hidden or display none just makes it un clickable to user. But in real its still an element in dom and you can click it with another java script/jquery like this.

$('div').click(function() {
    alert('Hello')
});
$('div').click();

jsfiddle

Copse

This is the correct answer. The marked-answer by @Alex is wrong/misleading. Why would anyone need this, someone might ask? I have a Partial-View in an Ajax Form and I want to Asyncronously Update it every X Minutes with a Partial-View Refresh. I added a Hidden Submit-Button to the Partial-View, and set up a timer to click the Button every X-Minutes and I was golden! My solution will check to see if any data has changed and then persist them back to the server (think auto-save). – Elijah

@Elijah couldn't you just set an interval and then collect and post the data? seems weird that you have to hide an ui element to click that programmatically – Ringhals

@Ringhals I added <button name="ActionVerb" value="Resume" data-AsyncPostback_RefreshInterval="@Model.PauseLimit" type="submit" hidden></button> From here I had some Javascript that looked for any "ActionVerb" buttons (that did not have a Property Style of "display:none;"), and it would parse out what Refresh Interval to use, and the Button would post back the Verb I wanted to Process (in this case "Resume", which would trigger a Refresh for me). This gave me the ability to write the JS once, then drop a Button like this anywhere and have it immediately wired up with a Timer. – Elijah

This actually is not the correct answer because it talks about display: none, while OP asks about visibility: hidden. – Proficient

Answer 3

No.

An element such as a hyperlink can't be clicked (and the link followed) if the visibility is set to hidden. Similarly, onclick events won't be fired.

Showery

Answer 4

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

Only if its children override the visibility.

---

CSS visibility does not forcefully apply to all children. Suppose you have a dialog box (my use case) that uses visibility:hidden. If anything inside that dialog box uses visibility:visible it will "break through" the parent and allow events.

The foolproof way is to create a new stacking context and shrink it to 0. Using transform is a simple way without having to cause a layout reflow (eg: max-height).

  visibility: hidden;
  transform: scale(0);

<div style="visibility:hidden">
  <input style="visibility:visible" value="Visible child">
</div>

<div style="visibility:hidden;transform:scale(0)">
  <input style="visibility:visible" value="Visible Child">
</div>

<div style="visibility:hidden">
  <input style="visibility:visible;opacity:0" value="Transparent Child">
</div>

<div>
  <input value="Normal">
</div>

It'll still take up the same space it normally would, but click events won't trigger, nor will the cursor change. That says nothing about keyboard Tab though...

Westernism

Possibly a useful comment, but not really an answer to the question--descendants with visibility: visible obviously don't have visibility: hidden on them anymore, because you... just overrode ti with visibility: visible. – Proficient

>"visible obviously don't have visibility:hidden" on them. It's not obvious because this doesn't apply to other properties like display:none. I updated the answer to more clearly answer the question. – Westernism

@Proficient I'm here approximately 6 months later having searched for the effects of visiblity:hidden, following the advice of this very stackoverflow question, and then realizing there was an element about 10 nodes deep that had visibility:visible that was taking mouse events. It's not obvious. The example is obvious, as answers should be. But the practice of allowing any child node, regardless of how deep or within shadow roots, to receive events is not obvious because children overriding visibility is not obvious. – Westernism

@Proficient "That you forgot about it is not a 'gotcha'; just means you didn't keep track of your own styles." That's a blind assumption on your part. Anything including externally sourced elements can break visibility. Things you subjectively claim to be "obvious" is still included in the spec like drafts.csswg.org/css-ui/#pointer-events-control (See Notes) noting the subtree. It has been resolved that it should be added to spec github.com/w3c/csswg-drafts/issues/6123#issuecomment-893890561 but be sure to let W3C know it's not needed since it's "so obvious" /s – Westernism