Hello Everyone, can someone help me, try to hide and show element by using opacity, but for some reason the link element still there and its able to be clickable, any suggestions on how to fix that. thanks. This can be also for a hide menu, on mobile devices.
codepen link is here.
thanks…
Thats because opacity is simply changing the visual display of the element. The element is still rendered in the DOM, it is just transparent.
Try using
display: none;
display: block;
invisible and out of the DOM, therefore cannot click or interact with element
or
visibility: hidden;
visibility: visible;
invisible but still rendered in the DOM but can NOT be clicked/interacted with
Hi there, sure I’m able to do that, but i was doing also transitions css, do animate the effect. but for some reason wont work with css transitions the display: block, and display: none;
so that is why i was doing it with opacity, but the problem is the clickable link still active.
Opacity isn’t the best way to hide something really. All opacity controls is how much of the color is seen. Having an opacity of 0 means you can’t “see it” but it is still there. The advantage of opacity is that you can use it with a CSS transition which it looks like you’re trying to do, so I do have a solution.
Usually for showing hiding, without the transition, you would either want to use display:none to completely remove the element from the DOM. Or you would use visibility: hidden to keep the element where it is and taking up space in your layout. (Which is basically what you have done by turning the opacity to 0.
In your case, since you want to keep the element there, but not allow the user to click on it, adding the css property pointer-events: none; would keep it from being click-able. But that also means that when you do “show” the link, you’ll need to change the pointer-events property back to auto!
See https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Oh i see. Then I would probably use a setTimeout() to equal the duration of your transition. The setTimeout() can then apply display:none on the element once the opacity transition has finished.
However this seems like a nicer solution 
The thing about making anything disappear with display:none is that anything below that is pressed up against the element would suddenly all move up on the page because display will completely remove it from the DOM.
If I have:
1
2
3
And on element #2, I put display:none, I will suddenly have:
1
3
IF, on the other hand, I put visibility: hidden on #2, I will end up with:
1
[2] <~~~ Takes up space, but is hidden from view
3
Of course, @imendieta wants to do this all with CSS opacity transitions, so leave JS timers out of it, just using the pointer-events: none; on a “.not-shown” class, and then when you apply your “.shown” class, give it the pointer-events: auto; property. There will a brief moment when it is fading in that it will be clickable while still being invisible, but if the whole point is to add the link, that shouldn’t be an issue 
.
Hello There… yes i have try to do it with both ways either display and the visibility option with display will hide its whole div, and the visibility will only affect the whole page and will still be there, and i do understand that, the only thing that i wanted to do its to just, try to do opactity to use transitions css because thats the only way to do it. other thing im working on its trying to do a z-index: 1; to the parents element and z-index: -1; to the child, that way will not be able to click on links. I really appreciate your help tho @camelcamper for it. let me see what i can do and get back to all you guys thanks for the feedback lots of appreciation.
Yes you made a good point out there @r-i-c-h its true opacity only works for colors to make them low or hi. but so it seems that you always do it with visibility, but like you said for example it will have space maybe i dont want that space there right ? we want to complete hide like a display: none; but true of waht you are saying regarding. the pointer-events: none; let me try that example and get but to you to see what i can play with. but that is a good response and answer you explain very good, what is used to do. maybe i can explain with a more realistic example and get back to you. Thank you so much @r-i-c-h you do help me a lot to understand things here.
Hi @r-i-c-h that is a good example there i think that is what it is for, that is a great example what you just did there… yes that is true, but to get a better understanding let me have an example on this and i will get back to you with what you replay with the pointer-events: none; and pointer-events: auto; to see what i can do with it. thank you so much for this feedback helps a lot to have this great knowledge and work on mistakes to have best practices. I will get back to all in short to see if i get stuck in something, that i might be missing. Thanks!!!