Comments on: pointer-events

By: Kerto

Kerto — Thu, 22 Jul 2021 17:59:20 +0000

Chris Coyier Thank you so much!

By: Anon Plz

Anon Plz — Fri, 08 May 2020 02:50:24 +0000

"none prevents all click, state and cursor options on the specified HTML element" could perhaps use better wording. The focus state event will still be triggered by tabbing to the element, for example.

By: Stefan

Stefan — Thu, 31 Oct 2019 08:12:51 +0000

Nice, I’ve used pointer-events to disable triggering product image lightbox when clicked on woocommerce products. Does the trick

By: Dmitri

Dmitri — Wed, 06 Feb 2019 21:25:51 +0000

I spent over an hour trying to figure out how to prevent a hover event until I came across this article.

I’m continually challenged by interesting designs and finding new ways of using CSS.

pointer-events: none;

Is now another tool in my belt.

Thank you.

By: Antonio

Antonio — Wed, 20 Dec 2017 13:16:41 +0000

that’s an intersting css property, never see this before. I was fixing a bug and stumble across it. That was the problem by the way, lol!

By: Khajan Singh

Khajan Singh — Tue, 22 Aug 2017 11:41:51 +0000

Are you sure !! this works for IE11 + Windows 7?

Because, I tried to make that working but radio buttons were still active.

By: Josh

Josh — Wed, 16 Nov 2016 04:34:51 +0000

In reply to Šime Vidas. @RK - Thank you kind sir

By: Usama Tahir

Usama Tahir — Sun, 08 May 2016 17:54:14 +0000

Mouse events may not work but touch on mobile device for example Iphone ios will work. To disable touch on mobile devices you can use.

-webkit-touch-callout: none;

By: test

test — Mon, 11 Jan 2016 03:40:15 +0000

tester tester tester tester tester tester

By: Hussein

Hussein — Thu, 01 Oct 2015 10:58:04 +0000

In reply to Chad. I second this motion ^_^

By: David Kuhn

David Kuhn — Mon, 23 Feb 2015 17:02:14 +0000

I found that this does NOT work with pseudo elements with IE11. I positioned the :after element over a select and tried to have the mouse click fall through to the select element, but it didn’t work using the after element. It does work with a regular span, so I just used that, but just a note if you are trying to use this on any psuedo-element.

By: hypothete

hypothete — Tue, 17 Feb 2015 18:26:47 +0000

Your ending note about inline SVGs with this property in IE9+ just saved me a huge amount of time. Thanks for being thorough!

By: Kaela

Kaela — Tue, 04 Nov 2014 22:52:34 +0000

This is great for pure css drop down menus! That css down arrow was bugging me. Thanks! http://codepen.io/kaela/pen/LAfEu

By: Random Joe

Random Joe — Thu, 21 Aug 2014 19:38:33 +0000

In reply to Cabe Branson. Unfortunately these tricks are ineffective if you if you have "hover CSS" inside the SVG file.

By: Birowsky

Birowsky — Sun, 22 Jun 2014 23:38:48 +0000

In reply to Birowsky.

K, i found the workaround:
http://stackoverflow.com/questions/21474722/touchmove-pointer-events-none-css-doesnt-work-on-chrome-for-android-4-4-chro