How to Map Mouse Position in CSS ?

<!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>

Source

spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here