Add Let Pointer Events Pass Through An Element as a css til

README.md

@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_897 TILs and counting..._
+_898 TILs and counting..._
 
 ---
 
@@ -105,6 +105,7 @@ _897 TILs and counting..._
 - [Define CSS Custom Properties With CSS Variables](css/define-css-custom-properties-with-scss-variables.md)
 - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
 - [Give Elements The Same Width With Flexbox](css/give-elements-the-same-width-with-flexbox.md)
+- [Let Pointer Events Pass Through An Element](css/let-pointer-events-pass-through-an-element.md)
 - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
 - [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)

css/let-pointer-events-pass-through-an-element.md

@@ -0,0 +1,20 @@
+# Let Pointer Events Pass Through An Element
+
+A graphical element can absorb a click event preventing your preferred target
+from recieving it. And nothing will happen. If the element is purely for visual
+effect, then there is some CSS you can add so that the underlying element will
+receive the click event.
+
+```css
+.ignore-clicks {
+  pointer-events: none;
+}
+```
+
+The [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) property specifies if and how an element "can become the target of pointer events."
+
+> In addition to indicating that the element is not the target of pointer
+> events, the value none instructs the pointer event to go "through" the
+> element and target whatever is "underneath" that element instead.
+
+[source](https://bradfrost.com/blog/post/overcomplicatin/)