Prevent div from being clickable and interfering with javascript

Question

On my website I have a webgl display of buildings, you can use the mouse to rotate the display and pan around. I then added a CSS animation of clouds, only when these clouds are in front of the webgl buildings it stops you from being about to use the mouse to rotate and pan. Is there a way of making it so the cloud divs aren't clickable or don't interfere with the webgl?

Answer 1

Give pointer-events:none; to the css of the clouds.. so that the click events on the cloud are passed on to the object that lies under it..:)

Answer 2

Try adding this to your CSS:

.cloud {
    pointer-events: none;
}