Open In App

How to Map Mouse Position in CSS ?

Last Updated : 22 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

This article will describe how to map the position of the mouse on the web page using CSS. You can do this in CSS using:hover pseudo-class and custom properties that contain the relative position of the mouse and change accordingly with:hover.

Approach: To map the position of the mouse, we will maintain two custom properties –posX, –posY and update them along with the mouse movement. In CSS, we cannot get the position of the mouse like in javascript so we need to add a grid of cells(squares) with relative numbering on the entire web page and refer those cells to decide a relative value for the mouse position ( Note: we cannot get the absolute position of the mouse in CSS ). The number of rows and columns in the grid can be decided by you. In this case, we will create a grid of 10X10.

Example: In this example, we will create an absolute container of 10 * 10 = 100 <div> tags in the <body> tag that spans the entire body, and using display: grid property, we will make the grid. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Create a Grid for Mouse Position</title>
  
    <style>
        .container {
            position: absolute;
            width: 100%;
            height: 100vh;
            display: grid;
            grid-template: repeat(10, 1fr) / repeat(10, 1fr);
            overflow: hidden;
        }
  
        .cell {
            width: 100%;
            height: 100%;
            border: 1px solid gray;
            z-index: 2;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>How to Map Mouse Position in CSS ?</h3>
  
    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</body>
  
</html>


Output: 

 

In the above example, the cells have a common class name (.cell) and hence they can be selected using .cell:nth-child( n ) where n = Cell number in the grid. You have to assume the cell number starting from 1 and ending with 100.

---------------------------
|    1   |    2   |   3   |   .... so on till 10
|        |        |       |
---------------------------
|   11   |
|        |
----------
     .
     :
     91 .......................... so on till 100

Finding the values for –posX and –posY: The value of –posX (X-coordinate) and –posY(Y-coordinate) is relative and can start from any value. In this case, the value of –posX starts from 1 and increases when the mouse moves horizontally. For example, when we hover over the first column the –posX becomes 1 and for column 2 the value of –posX becomes 2, and so on. Similarly, for y-coordinate. Remember that, we should update them using the:hover pseudo-class.

.cell:nth-child(1):hover {
    --posX: 1;
    --posY: 1;
}

In the above code, when we hover over the first cell in the grid the –posX and –posY become (1,1).

The same code snippet must be included in each and every cell in the grid. To do this, we will analyze the grid, The grid contains 10 rows with numbers from 1 – 10 which means the –posY gets reflected with the change in the position of the mouse from one row to another. For example, the value of –posY = 3 when the mouse is at the third row. But to find the position of the row, we need to find the range of the row (starting and ending cell number). For example, in a 10X10 grid the range of the first row is 1 – 10, the second row is 11-20, and so on.

So in CSS, let’s say if you want to select the first row we do this:

.cell:nth-child(n + 1):nth-child(-n + 10):hover {
    --posY : 1
}

where,

  • n selects all the multiples of 1 and n+1 = first row.
  • -n + 10 is the last cell in the row.

For the second it becomes (n + 2) to (-n + 20) and so on.

Similarly, –posX changes when the mouse position changes from column to column. For –posX  when the mouse is in first column :

.cell:nth-child(10n+1):hover {
    --posX: 1 ;
}

where,

  • 10n selects every multiple of 10
  • 10n + 1 selects the first column

For the second it is 10n+2 and so on.

Now, you need to add the above code snippets to every cell in the grid-like shown in the below examples

Example 1: In this example, we will track the position of a mouse using the above approach and update the –posX and –posY using:hover pseudo-class and change the size of the central black circle of the page shown in the output. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Map Mouse Position in CSS ?
    </title>
  
    <style>
        .container {
            height: 100vh;
            display: grid;
            grid-template: repeat(10, 1fr) / repeat(10, 1fr);
            position: absolute;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 0;
        }
  
        .cell {
            width: 100%;
            height: 100%;
            border: 1px solid gray;
            z-index: 2;
        }
  
        .cell:nth-child(10n+2):hover~.parent {
            --posX: 1;
        }
  
        .cell:nth-child(n+11):nth-child(-n+20):hover~.parent {
            --posY: 1;
        }
  
        .cell:nth-child(10n+3):hover~.parent {
            --posX: 2;
        }
  
        .cell:nth-child(n+21):nth-child(-n+30):hover~.parent {
            --posY: 2;
        }
  
        .cell:nth-child(10n+4):hover~.parent {
            --posX: 3;
        }
  
        .cell:nth-child(n+31):nth-child(-n+40):hover~.parent {
            --posY: 3;
        }
  
        .cell:nth-child(10n+5):hover~.parent {
            --posX: 4;
        }
  
        .cell:nth-child(n+41):nth-child(-n+50):hover~.parent {
            --posY: 4;
        }
  
        .cell:nth-child(10n+6):hover~.parent {
            --posX: 5;
        }
  
        .cell:nth-child(n+51):nth-child(-n+60):hover~.parent {
            --posY: 5;
        }
  
        .cell:nth-child(10n+7):hover~.parent {
            --posX: 6;
        }
  
        .cell:nth-child(n+61):nth-child(-n+70):hover~.parent {
            --posY: 6;
        }
  
        .cell:nth-child(10n+8):hover~.parent {
            --posX: 7;
        }
  
        .cell:nth-child(n+71):nth-child(-n+80):hover~.parent {
            --posY: 7;
        }
  
        .cell:nth-child(10n+9):hover~.parent {
            --posX: 8;
        }
  
        .cell:nth-child(n+81):nth-child(-n+90):hover~.parent {
            --posY: 8;
        }
  
        .cell:nth-child(10n+10):hover~.parent {
            --posX: 9;
        }
  
        .cell:nth-child(n+91):nth-child(-n+100):hover~.parent {
            --posY: 9;
        }
  
        .cell:nth-child(10n+11):hover~.parent {
            --posX: 10;
        }
  
        .cell:nth-child(n+101):nth-child(-n+110):hover~.parent {
            --posY: 10;
        }
  
        .parent {
            --posX: 0;
            --posY: 0;
  
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
  
        .circle {
            width: calc(100px + var(--posX) * 100px);
            height: calc(100px + var(--posY) * 100px);
            background: black;
            transition: all 0.4s;
            border-radius: 100%;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>How to Map Mouse Position in CSS ?</h3>
  
    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="parent">
            <div class="circle"></div>
        </div>
    </div>
</body>
  
</html>


Output :

 

Example 2: In this example, we will create a circle that changes its color with a change in mouse position using the above approach by referring to the –posX only. –posX contains color names that change with hover.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Map Mouse Position in CSS ?
    </title>
  
    <style>
        .container {
            height: 100vh;
            display: grid;
            grid-template: repeat(10, 1fr) / repeat(10, 1fr);
            position: absolute;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 0;
        }
  
        .cell {
            width: 100%;
            height: 100%;
            border: 1px solid #9f9b9b5c;
            z-index: 2;
        }
  
        .cell:nth-child(10n+2):hover~.parent {
            --posX: red;
        }
  
        .cell:nth-child(10n+3):hover~.parent {
            --posX: blue;
        }
  
        .cell:nth-child(10n+4):hover~.parent {
            --posX: green;
        }
  
        .cell:nth-child(10n+5):hover~.parent {
            --posX: yellow;
        }
  
        .cell:nth-child(10n+6):hover~.parent {
            --posX: black;
        }
  
        .cell:nth-child(10n+7):hover~.parent {
            --posX: orange;
        }
  
        .cell:nth-child(10n+8):hover~.parent {
            --posX: pink;
        }
  
        .cell:nth-child(10n+9):hover~.parent {
            --posX: purple;
        }
  
        /*# sourceMappingURL=output.scss.map */
  
        .parent {
            --posX: black;
  
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
  
        .circle {
            width: 200px;
            height: 200px;
            background: var(--posX);
            transition: all 0.4s;
            border-radius: 100%;
        }
    </style>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>How to Map Mouse Position in CSS ?</h3>
  
    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
  
        <div class="parent">
            <div class="circle"></div>
        </div>
    </div>
</body>
  
</html>


Output :

 



Similar Reads

How to move mouse pointer to a specific position using JavaScript ?
In this article, we will learn how to move a mouse pointer to any specific position in the web browser using JavaScript. Before we start, you need to know that it's not actually possible to move the mouse pointer to a position using Javascript, such functionality can be easily misused but we can simulate something similar. In this article, we will
4 min read
How to get the Position of mouse pointer in jQuery ?
In this article, we will see how to get the position of the mouse pointer using jQuery. To get the position of mouse pointer, event.pageX, and event.pageY property is used. The event.pageX property is used to find the position of the mouse pointer relative to the left edge of the document. The event.pageY property is used to find the position of th
1 min read
What is the difference between position:sticky and position:fixed in CSS ?
In CSS, position: sticky and position: fixed both offer elements the ability to stay in a fixed position during scrolling. These two CSS properties, while seemingly similar, have distinct behaviors that can significantly impact the layout and user experience of a webpage. This article will tell you the differences, providing you more understanding
6 min read
PHP | Ds\Map map() Function
The Ds\Map::map() function of the Map class in PHP is used to apply a callback function to a Map object. This returns the result of applying the callback function to each value present on the map. The function does not update the values in the original map, instead, it just returns the result of the updates without affecting the original values. Sy
2 min read
How to map array values without using map method in JavaScript ?
Array elements can be mapped by using looping methods in JavaScript. The map() method creates a new array with the results of the output of a function called for each array element. This can also be implemented using for loop in JavaScript. Approach: For this, we can create two arrays, in which one array contains the array elements that are to be m
2 min read
What is image map &amp; how to map the image in HTML ?
In this article, we will discuss an image map in HTML, along with understanding its implementation through the examples. An Image Map refers to the clickable image having a clickable area that can be used to navigate to the various link to other web pages or the specific section of the same web page. The &lt;map&gt; tag can be used to define the im
2 min read
Create a Map with Google Map Api using React-Native
In this project, we'll explore how to integrate Google Maps into a React Native application. We'll create a dynamic map that allows users to view their current location and interact with markers on the map. This project aims to provide a practical guide for developers looking to incorporate maps into their mobile applications using React Native. Ou
3 min read
How to spin text on mouse hover using HTML and CSS?
The spinning of text on mouse hover is known as the Spin Effect or the Rotation Effect. In this effect, each alphabet of the word is rotated along with any one of the axes (preferably Y-axis). Each word is wrapped inside in &lt;li&gt; tag and then using CSS:hover Selector selector we will rotate each alphabet on Y-axis. We will divide this article
2 min read
How to split text horizontally on mouse move over using CSS ?
The splitting of text on mouse move over is also known as the "SPLIT" effect or "BREAK" effect. The effect was really popular in web design in the past but now with emerging of new web design patterns, it has started to lose its place. Approach: The approach is to split text into two parts using before and after selectors. Then we will use hover se
3 min read
Design Smiley Face Eyes that follow Mouse Cursor using CSS and JS
An animated face by using HTML and CSS and JavaScript. Where the face will follow the cursor. It is one of the simple CSS and JavaScript effects. For a beginner, it is one of the best examples to learn the concept of pseudo-elements. Approach: The Basic idea of a face is comes from CSS.Here the whole animation will be made by CSS and a little bit o
5 min read