From 2fa329eced9e884a4a8192046d4ad400632a7af4 Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Tue, 14 Jan 2020 13:50:38 -0600 Subject: [PATCH] Add Let Pointer Events Pass Through An Element as a css til --- README.md | 3 ++- ...-pointer-events-pass-through-an-element.md | 20 +++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 css/let-pointer-events-pass-through-an-element.md diff --git a/README.md b/README.md index 1a147dd..9a5626e 100644 --- a/README.md +++ b/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) diff --git a/css/let-pointer-events-pass-through-an-element.md b/css/let-pointer-events-pass-through-an-element.md new file mode 100644 index 0000000..11d0559 --- /dev/null +++ b/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/)