By
The pointer-events CSS property has long been available as part of SVG as a way to control if a mouse event should be sent to the element directly underneath the mouse or passed through to an element underneath it. In Firefox 3.6 we’ve extended the property to allow it to apply to normal HTML content as well.
For SVG you can set the pointer-events property to one of several values, but for HTML you can only set it to one of two values: auto or none.
.foo {
pointer-events: none;
}
When pointer-events is set to none, pointer events are passed through the target element and are instead sent to the element that is underneath it.
.foo {
pointer-events: auto;
}
When pointer-events is set to auto, pointer events are handled normally. That is, the element blocks the events from being passed down to a lower element.
Here’s a real world example from Paul Rouget. You will need a Firefox 3.6 beta to see it in action.
Click the pointer-events: none checkbox under the image to see it change.
He’s replicated the tag list that’s on the front page of twitter.com. (Note: you have to not be logged in to see the tag list.) If you go and look at it on twitter you’ll notice that it fades off on the right hand side. This is done with a transparent, faded image that sits on top of the underlying box. The tags underneath are clickable links but the image blocks events from being sent to the ones underneath the fade.
What Paul has done is show how you can use the pointer-events property to allow you to click on the underlying links even with a fade on top of it.
About Christopher Blizzard
Making the web better, one release at a time.
31 comments