CSS: Is a hidden object clickable?
CssVisibilityDisplayCss Problem Overview
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.
Css Solutions
Solution 1 - Css
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.
$('div').click(function() {
alert('Hello')
});
div {
width: 100%;
height: 100%;
visibility: hidden;
}
<div>abc</div>
Solution 2 - Css
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();
Solution 3 - Css
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.
Solution 4 - Css
An HTML element with visibiality: hidden
is not visible
but it still takes up space on the page.
You can't trigger events (click, hover, ...) by using mouse, but
you can use javascript to access it through DOM and trigger events.
Solution 5 - Css
You can use useRef in react, add ref to your input and use it to call onClick like below
import React, { useRef } from "react";
const input = useRef();
<input ref={input} type="file" />
and then call whatever you want like click method
input.current.click();