CODEWITHSUNDEEP
css
Pwner
Pwner

Reputation: 3795

How do you make transparent elements non-interactable?

I'm showing and hiding elements with a fade in / fade out effect.

CSS

.element {
   opacity: 1.0;
   transition: opacity 0.3s linear;
}

.element.hidden {
   opacity: 0.0;
}

JS

// hide
$('someElement').addClassName('hidden');

// show
$('someElement').removeClassName('hidden');

The problem with this is that an invisible element still occupies space. If the user tries to click something beneath it, this invisible element intercepts the click and the user gets confused. Is there a CSS property that will make the element non-interactable? I'm aware there are some hacks like setting top:-999em in the .hidden class, but I'm asking if you know any elegant solutions.

Upvotes: 0

Views: 1131

Answers (1)

BoltClock
BoltClock

Reputation: 724162

You will need to transition visibility as well:

.element {
   opacity: 1.0;
   visibility: visible;
   transition: opacity 0.3s linear, visibility 0.3s linear;
}

.element.hidden {
   opacity: 0.0;
   visibility: hidden;
}

An element with visibility: hidden can be clicked through; i.e. it won't intercept the click.

If you need the element to disappear altogether rather than continue to occupy space, you need to use display: none instead, but that is not an animatable property so you'll see the element disappear abruptly rather than fade out.

Upvotes: 5

Related Questions