#pointer-events

[helena-om-webb]

pointer-events | CSS-Tricks

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events

[jaceju]

张鑫旭的个人博客_web前端技术文章_pointer-events:none提高页面滚动时候的绘制性能？

[kazu69]

[fromanegg]

Clicking through a div to underlying elements

Yes it is possible to click through a div to underlying elements using only css. I've seen this question asked so many times online and so often the answer given is that you require javascript, or even sometimes whole libraries to accomplish this task.

Let me introduce you to the pointer-events CSS property. This property allows you to control under what situations an SVG target element should become the target of mouse events. As an experimental feature in CSS3 it has also added basic support for non-SVG elements in modern browsers (Chrome 2, FireFox 3.6, Safari, 4).

div.overlay { pointer-events: none; }

Will now pass all click events on the overlay div through to the underlying elements. To get the same functionality in IE 5.5 and up we can use the AlphaImageLoader filter in an IE conditional.

div.overlay { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='overlay.png', sizingMethod='scale'); background: none !important; }

Or in IE8 and up outside of a conditional.

div.overlay { -ms-filter: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=overlay.png, sizingMethod=scale)'; background: none !important; }

Having issues implementing this? Mention me @fromanegg or leave a comment below. Until next time!

[kazu69]

[kazu69]

[bricss]

CSS hack to target Opera

Last week – while I was working on my new personal site – I had to find a way around Opera not supporting pointer-events. After a quick round of googling, I stumbled upon a CSS hack to target Opera only. That way I was able to simply hide the overlaying generated content that was stealing pointer events from underlying links.

x:-o-prefocus, .intro:after { display: none; }

:-o-prefocus is a prefixed pseudo-class which was added in Opera 9.5 and allows styling of form elements reached via spatial navigation. Since x is a non-existing element, we're not really using it here, but the trick is that other browsers don't understand this selector and therefore disregard the whole rule. Problem solved.

Here's a simple JSFiddle demonstrating the hack.