CSS3 pointer-events allow objects to respond transparently to mouse events of the underlying object

Reference: http://www.css88.com/book/css/properties/user-interface/pointer-events.htm Syntax:

pointer-events: Auto | none | visiblepainted | Visiblefill | Visiblestroke | Visible | Painted | Fill | Stroke | All

default value : Auto

applies to : all elements

inheritance : There are

Animation : No

Calculated value : Specify a value

Value:

Auto

Behaves the same as when the Pointer-events property is not specified. Same as value on SVG content visiblepainted

None

The element will never be the target of a mouse event. However, when the Pointer-events property of its descendant element specifies a different value, the mouse event can point to the descendant element, in which case the mouse event will trigger the parent element's event listener in the capture or bubbling order.

Other values can only be applied to SVG.

Description

Sets or retrieves the target when the property event becomes.

• Using pointer-events to prevent an element from becoming a mouse event target does not necessarily mean that an event listener on an element never fires. If an element descendant explicitly specifies a pointer-events property and allows it to be the target of a mouse event, any event that points to that element passes through the parent element during the event propagation and triggers the event listener on it in the appropriate manner. Of course, mouse activity on the screen on the parent element but not on the descendant elements is not captured by the parent and descendant elements (which will pass through the parent element and point to the element below it).
• The corresponding script attribute is pointerevents.

Instance:

<! DOCTYPE HTML>

< HTML >

< Head lang="en">

    < Meta CharSet="UTF-8">

    < title > </ title >

    < style >

        a{

            Position:absolute;

            top:0;

            left:0;

        }

        . front{

            Background-color: #c9e2b3;

            Z-index:10;

            width:100px;

            height:100px;

            Pointer-events:none;

        }

        . back{

            Background-color: #f99f9f;

            width:150px;

            height:150px;

        }

    </ style >

</ Head >

< Body >

    < a class="front"onclick="alert (' front! ');" > </ a >

    < a class="Back"onclick="alert (' back! ')" > </ a >

</ Body >

</ HTML >

CSS3 pointer-events allow objects to respond transparently to mouse events of the underlying object