Hello,
I have 2 icons in Div and i am hiding and shown it with opacity and 0.3s fade-in-out transition.
Problem is that icon is clickable when is not visible and i dont want user to be able to click on it when icon is not visible.
-
If i use display: none it cant be clicked but its hide it immediately without fade-in-out transition.
-
I have tried to change display to none after opacity transition finishes but when i want to show icons again on Mouse Leave, its shows immediately. Probably Display function is stronger than Opacity.
Any help?
Hi Zoran, interesting question.
If that icon is a button element you can use the “disabled” property dynamically
But if you are not using a button you might need to play around with some custom CSS so you deny mouse interaciont while your animation is playing. probably by using something like “pointer-events: none”
Hello Agustin_Carozo,
Thank you for your answer. No i am not using button. If there is no other solution probably i will need to do it with custom CSS. Just, how to know or control when custom CSS to to execute? I dont want pointer-events: to be to none all the time.
Thank you in advance
