Hidden DIV links making others unclickable

Question

Hello and thanks for reading. I am having an issue where a hidden div with opacity: 0; still allows the user to interact with clickable elements of div. This makes it so the user can't interact with clickable elements of that that hidden div that overlap. I would typically tackle this by using position: absolute; pointer-events: none; position: absolute; pointer-events: none; but that results in the opposite taking place in which the hidden div's links are no longer clickable. I have double-checked my z-index and its looks correct but the issue persists. Furthermore the hidden div seems to ignore the toggle effect applied to it and just pops up with any animation.

Click the checkbox to activate the hidden div:

http://codepen.io/gmrstudios/pen/jyoZvL

Answer 1

use overflow: hidden; on the td.tg_admin element. And please use tg_admin as a class, ids are meant to be used only once.