Tutorials


CSS pointer-events property


The pointer-events property in CSS controls how an element responds to mouse events such as clicks, hover, and other pointer interactions. It can be used to make elements non-interactive or to enable or disable interaction with underlying elements.

Syntax

element {
    pointer-events: value;
}

Values

  1. auto:

    • Description: The default value. The element behaves as it would normally in terms of pointer events, meaning it can receive mouse events.
    • Usage: Use this to restore the default pointer behavior for an element.
    • Example: pointer-events: auto;

  2. none:

    • Description: The element does not receive any pointer events. This means it is effectively "transparent" to mouse interactions, allowing clicks and other events to pass through to elements underneath.
    • Usage: Use this to make an element non-interactive while allowing underlying elements to be interacted with.
    • Example: pointer-events: none;

  3. visiblePainted:

    • Description: Only events on visible parts of the element are processed. It is relevant in SVG contexts.
    • Usage: Typically used in SVG graphics to control interactions.
    • Example: pointer-events: visiblePainted;

  4. visibleFill:

    • Description: Only events on the visible fill parts of the element are processed. It is relevant in SVG contexts.
    • Usage: Used for SVG elements where interaction should only happen within the fill area.
    • Example: pointer-events: visibleFill;

  5. visibleStroke:

    • Description: Only events on the visible stroke parts of the element are processed. It is relevant in SVG contexts.
    • Usage: Used for SVG elements where interaction should only happen within the stroke area.
    • Example: pointer-events: visibleStroke;

  6. painted:

    • Description: Similar to visiblePainted, but events are processed on all painted areas, including those not currently visible.
    • Usage: Used in SVG contexts to interact with all painted areas.
    • Example: pointer-events: painted;

  7. stroke:

    • Description: Only events on the stroke area of an SVG element are processed.
    • Usage: Useful for SVG elements where interaction is limited to the stroke area.
    • Example: pointer-events: stroke;

  8. fill:

    • Description: Only events on the fill area of an SVG element are processed.
    • Usage: Useful for SVG elements where interaction is limited to the fill area.
    • Example: pointer-events: fill;

Examples

Example 1: Making an Element Non-Interactive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pointer Events Example</title>
    <style>
        .non-interactive {
            pointer-events: none;
        }
        .interactive {
            background-color: #f0f0f0;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="interactive">Clickable Area</div>
    <div class="non-interactive">This area does not respond to clicks.</div>
</body>
</html>
  • In this example, the non-interactive div does not respond to any pointer events, such as clicks, while the interactive div is clickable.

Example 2: Enabling Interaction Through Transparent Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pointer Events Example</title>
    <style>
        .container {
            position: relative;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            pointer-events: none;
        }
        .underlying {
            background-color: #f0f0f0;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="overlay"></div>
        <div class="underlying">You can still click me even though there's an overlay.</div>
    </div>
</body>
</html>
  • In this example, the overlay div does not block pointer events due to pointer-events: none;, allowing interactions to pass through it to the underlying div.

Example 3: SVG Pointer Events

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Pointer Events Example</title>
    <style>
        .rect {
            fill: blue;
            stroke: black;
            stroke-width: 5;
        }
        .no-interaction {
            pointer-events: none;
        }
    </style>
</head>
<body>
    <svg width="200" height="200">
        <rect x="10" y="10" width="100" height="100" class="rect no-interaction"></rect>
    </svg>
</body>
</html>
  • In this example, the rect element in the SVG has pointer-events: none;, so it does not respond to pointer events, such as mouse clicks.

Browser Support

The pointer-events property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported in Internet Explorer 11 and above. The values related to SVG (like stroke, fill) are mainly used in SVG contexts and may have limited support outside of SVG elements.

Use Cases

  • Interactive Elements: Control which elements can receive pointer events, such as making a button or link interactive while preventing interaction with overlay elements.
  • Design and Usability: Improve user experience by ensuring that certain elements do not interfere with interactions or are fully interactive as intended.
  • Accessibility: Manage how users interact with different parts of a web page, ensuring that interactive areas are accessible and non-interactive areas do not obstruct user actions.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about