Pointer-Events


The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

While the pointer-events property takes eleven possible values, all but three of them are reserved for use with SVG. The three valid values for any HTML element are:
  • none prevents all click, state and cursor options on the specified HTML element
  • auto restores the default functionality (useful for use on child elements of an element with pointer-events: none; specified
  • inherit will use the pointer-events value of the element's parent
As demonstrated above, the prime use case for pointer-events is to allow click or tap behavior to “pass through” an element to another element below it on the Z axis. For example, this would be useful for graphic overlays, or hiding elements with opacity (eg. tool tips) and still allowing text-selection on the content below it.

Syntax

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

Values

auto
The element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.
none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
visiblePainted
SVG only. The element can only be the target of a mouse event when the visibilityproperty 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
SVG only. The element can only be the target of a mouse event when the visibilityproperty 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
SVG only. The element can only be the target of a mouse event when the visibilityproperty 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
SVG only. 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
SVG only. 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 thannone, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and thestroke property is set to a value other than none. The value of the visibility property does not affect event processing.
fill
SVG only. 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
SVG only. 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
SVG only. 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, strokeand visibility properties do not affect event processing.
 

Comments

Post a Comment

Popular posts from this blog

What is the difference between UI & UX design?

You'll probably get a variety of different answers due to the fact that both UI and UX design have that distinct cross-disciplinary character that makes it hard to have a single, solid definition. Here's my perspective on it though. Some random thoughts on the process itself that would hopefully help you distinguish between the two. UX Design   UX architecture intelligently provides for the user's interactive experience via features and functionality of a software-based product or service. This is achieved through a UX process which includes user persona definition, user scenarios/task flows, primary and edge use cases, architecture hierarchy of content and user decision points, etc... The UX-er is known as the primary user-advocate on a team, thereby leading the efforts around understanding the user needs/desires along with balancing those of the business stakeholders. UX documentation informs (and is informed by) content and development requirements; UX informs cre...
Read more

How to Add Google Web Fonts in WordPress Themes the “Right” way

Adding Google Web Fonts in WordPress Themes We have mostly seen folks using the first two methods. The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this: @import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);     You can also combine multiple font requests into one.  Here is how you would do it:   @import url(http://fonts.googleapis.com/css?family=Lora|Oswald);   This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. If you MUST use @import, then at least combine multiple requests into one.    You will most likely have to edit your header.php file, and paste the followi...
Read more