How to bring to front only the planets, and not their trajectory?

Question

I added an event to all planets, but when there is a trajectory over one planet, I can't press that planet.
I have tried giving to all trajectories z-index:-1; and to planets z-index:2; but I can't make it to work.

(Make some planets and tap them. After you tap them the blue div from the bottom will appear with the planet info.)

Help me please, I really need this.
https://code.sololearn.com/W1myjosjZODa/?ref=app

Answer 1

z-index on child is relative to its parent, so as planet object are child of trajectory object, you cannot have all planets on higher z-index than all trajectories ^^

anyway, you could css disabled click on an element (not working on IE, but theorically on IE there's no suxh problem if the background is transparent as for your trajectories), and enable it again for child:
put 'pointer-events:none;' to trajectory css style, and 'pointer-events:auto;' to planet css style...

Aside advice: define a class for trajectory and a class for planet, so you could "hardcode" all css rules not needing parameters and only define with js rules wich requires parameters at runtime ;)

Answer 2

visph that worked! Thank you !
Css pointer-events seems pretty useful, I have to search and learn about it. :)