Add Prevent Invisible Elements From Being Clicked as a CSS TIL

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1609 TILs and counting..._
+_1610 TILs and counting..._
 
 See some of the other learning resources I work on:
 - [Ruby Operator Lookup](https://www.visualmode.dev/ruby-operators)
@@ -191,6 +191,7 @@ If you've learned something here, support my efforts writing daily TILs by
 - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)
 - [Make A Block Of Text Respect New Lines](css/make-a-block-of-text-respect-new-lines.md)
 - [Parameterized SCSS Mixins](css/parameterized-scss-mixins.md)
+- [Prevent Invisible Elements From Being Clicked](css/prevent-invisible-elements-from-being-clicked.md)
 - [:root Has Higher Specificity Than html](css/root-has-higher-specificity-than-html.md)
 - [Style A Background With A Linear Gradient](css/style-a-background-with-a-linear-gradient.md)
 - [Using Maps In SCSS](css/using-maps-in-scss.md)

css/prevent-invisible-elements-from-being-clicked.md

@@ -0,0 +1,29 @@
+# Prevent Invisible Elements From Being Clicked
+
+I have a nav element that when clicked reveals a custom drop-down menu. It
+reveals it using CSS transitions and transformations (`opacity` and `scale`).
+When the nav element is clicked again, the reverse of these transformations is
+applied to "hide" the menu. This gives a nice visual effect.
+
+It only makes the menu invisible and doesn't actually make it go away. That
+means that menu could be invisible, but hovering over the top of a button on
+the screen. The button cannot be clicked now because the menu is intercepting
+that [_pointer
+event_](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).
+
+The fix is to apply CSS (or a class) when the drop-down menu is closed that
+tells it to ignore _pointer events_.
+
+```css
+.pointer-events-none {
+  pointer-events: none;
+}
+```
+
+This is more of less what [the `pointer-events-none` TailwindCSS
+utility](https://tailwindcss.com/docs/pointer-events) looks like.
+
+This class is applied by default to the drop-down menu. Then when the nav item
+is clicked, some JavaScript removes that class at the same moment that the menu
+is visually appearing. When a menu item is selected or the menu otherwise
+closed, it transitions away and the `pointer-events-none` class is reapplied.