How to Map Mouse Position in CSS

This article demonstrates a pure CSS technique to capture mouse position and map it to custom CSS properties: --positionX and --positionY. While JavaScript offers similar capabilities, this method avoids JavaScript entirely, achieving effects like click-and-drag interactions using only CSS.

The core concept involves creating an invisible grid and leveraging the :hover pseudo-class. Each grid cell triggers a change in the custom properties, reflecting the mouse's X and Y coordinates. This allows for dynamic control of various CSS properties.

Setup:

The initial HTML includes a wrapper <div> with a <code>.content class, spanning the body's width and height. This container holds the element to be manipulated (e.g., a .square element) and defines the custom properties --positionX and --positionY.

The Grid:

A 10x10 grid is created using CSS Grid. The grid size is adjustable, but larger grids increase accuracy at the cost of performance. Crucially, the grid cells (.cell elements) precede the .content div in the HTML to leverage CSS cascading rules effectively.

Positioning Cells:

The .cell elements are positioned using display: grid. A temporary border aids visualization during development. z-index: 2 ensures the cells are layered above the .content.

Adding Values:

The core logic involves assigning values to --positionX and --positionY based on which grid cell is hovered. A Sass @for loop iterates through the cells, calculating and applying the appropriate values using :nth-child() selectors.

The X-axis mapping uses :nth-child(10n #{$i 1}) to select columns, while the Y-axis uses :nth-child(n #{10 * $i 1}):nth-child(-n #{10 * ($i 1)}) to select rows.

Handling Custom Properties:

The custom properties are then used within calc() functions to dynamically control the .square element's width and height. For instance:

.square {
  width: calc(100px   var(--positionX) * 20px);
  height: calc(100px   var(--positionY) * 20px);
}

An alternative method directly sets width and height values within the Sass loop, offering more flexibility for complex calculations.

Further Applications:

The technique extends beyond width and height manipulation. It can control top, left, transform, background-position, colors, and pseudo-element content, opening diverse creative possibilities. The article encourages readers to experiment and share their creations.

The above is the detailed content of How to Map Mouse Position in CSS. For more information, please follow other related articles on the PHP Chinese website!