nhoughto nhoughto - 1 month ago 5
CSS Question

Hide page elements without deactivating their events

I am working on a simple HTML/JS/Jquery game where you are supposed to look for a hidden vegetable on the page.

I have an image placed on the screen randomly on page load but it is hidden. When the user clicks on the image I want it to appear.

I tried using Jquery hide/show. This works fine if the image starts visible however, it fires the onclick event nicely. If the image starts as hidden it deactivates the onclick event. I know I am clicking on the correct spot on the page but the event never fires.

I tried using

$("#image").css("display", "none");
however this also deactivates the onclick. Is there another means of hiding an element that does not deactivate it's events?

Answer

You could use $("#image").css("opacity", "0");

Comments