---
title: "How to Map Mouse Position in CSS"
url: https://daily.dev/posts/how-to-map-mouse-position-in-css-y6xmo5vz7
source_url: https://css-tricks.com/how-to-map-mouse-position-in-css/
type: article
source: "CSS-Tricks"
published: 2021-03-01T16:47:17.138Z
updated: 2021-10-07T14:17:10.317Z
tags: ["webdev", "css"]
reading_time: 7
upvotes: 35
comments: 1
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Map Mouse Position in CSS

**[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 7 min read · 35 upvotes · 1 comments

## Summary

The goal is to create an invisible grid on the screen, and use the :hover pseudo-class to map each ‘cell’ to a set of values that we will allocate to the custom properties. We will use the mouse position to set the value of these properties, and then use them set the .square element’s width and height accordingly.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://css-tricks.com/how-to-map-mouse-position-in-css/>

## Community discussion

Top comments from developers on daily.dev.

**@ghost** · 1 upvotes

> Wonderful use of the SASS for loop and using custom CSS properties with calc() function.

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/how-to-map-mouse-position-in-css-y6xmo5vz7)