These days CSS has a lot of power. One of the most awesome features we can use today is the pointer-events porperty.
In short, the pointer-events property allows you to control when, and if, an element will respond to mouse events. For example, pointer-events: none will prevent the element it is applied to from firing hover, click, mousedown, mouseup etc. Yes, this even overrides JavaScript functionality.
pointer-events Basics
The pointer-events property accepts two basic values:
As mentioned earlier, pointer-events: none will prevent any pointer-generated events from firing, even if JavaScript has a function set to fire.
pointer-events: auto will set the element back to it’s default and will fire all events that has been set (JavaScript, CSS and default browser behavior).
If unspecified, the default will always be auto.
The SVG Corner
SVG allows a few other values for pointer-events:
visiblePainted;, visibleFill;, visibleStroke;, visible;, painted;, fill;, stroke; and all;. These values apply for SVG only and will have no effect on other elements.
visiblePainted
The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., fill) of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., ‘stroke’) of the element and the stroke property is set to a value other than none.
visibleFill
The element can only be the target of a mouse event when the visibility property is set to visible, and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the fill property does not affect event processing.
visibleStroke
The element can only be the target of a mouse event when the visibility property is set to visible, and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not affect event processing.
visible
The element can be the target of a mouse event when the visibility property is set to visible, and the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill and stroke do not affect event processing.
painted
The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., fill) of the element, and the fill property is set to a value other than none; or when the mouse cursor is over the perimeter (i.e., stroke) of the element and the stroke property is set to a value other than none. The value of the visibility property does not affect event processing.
fill
The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) of the element. The values of the fill and visibility properties do not affect event processing.
stroke
The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibility properties do not affect event processing.
all
The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke and visibility properties do not affect event processing.
And now, a demo.
This demo is the inspiration behind this post. It brings out how pointer-events can be used to achieve some very nice results. MartijnCuppens’ pen: Stuff you can do with CSS pointer events. (Martijn is also the mind behind the DIV that looks different in every browser and other cool stuff!)
That’s it for this time,
so until the next time…
