|
Mapping the mouse position or implementing drag effects, we can do this in JavaScript . But in fact, there is a more concise way in CSS, we can still achieve the same function without using JavaScript ! To mimic the mouse "click and drag" effect using only CSS, let's see how to get the user's mouse position and map it to CSS custom properties: --positionX and --positionY . The following are the specific implementation steps. initialization Our first demo will use --positionX and --positionY custom properties to set the width and height of an element.
<div class="content">
<div class="square"></div>
</div>
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: black;
height: 100vh;
}
.content {
--positionX: 0;
--positionY: 0;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.square {
width: 100px;
height: 100px;
background: white;
} 
This is our initial state. We have a container <div> called .content here, its width and height fill body , which is the content body of the project. <div> with the class name .square is the element we want to control with the mouse in this example. We also added two custom properties to the content. We'll use the mouse position to set the values of these properties, and then use them to set the width and height of the .square element. Once we have drawn custom properties for the mouse position, we can do pretty much anything we want with them. For example, we can use them to set top/left of an absolutely positioned element, control transform property, set background-position , adjust color , and even set the content of a pseudo-element. We’ll see some of these demos at the end of this article, along with links to the corresponding Codepen projects. grid The goal is to create an invisible grid on the screen and use :hover pseudo-class to map each "cell" to a set of values for our custom properties. At this point, when the mouse cursor moves to the right side of the screen, the value of --positionX will be higher: when the mouse moves to the left, it becomes lower. The same goes for --positionY : when the cursor moves to the top, the value will be lower, and when the cursor moves to the bottom, the value will be higher. A note about grid size and grid partitioning: We can actually use any grid size we can get away with. The larger it is, the more accurate the custom property value will be. But this also means that we will have more grid blocks. Too many grid blocks may cause performance problems. It is very important to adjust the grid size in a proper balance according to the actual project. Now, suppose we need a 10×10 grid, so a total of 100 grid tiles in our container. (In actual development, you can use syntax such as pug to quickly create tables. In the example, all 100 spaces are represented by div .)
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<!-- 97 more cells -->
<div class="content">
<div class="square"></div>
</div> Because of the cascading relationship, .cell element is placed before the .content element. We want to use .cell class to control .square . Due to the cascading relationship of CSS, an element can only control its child elements (or child elements of child elements) and the sibling elements (or child elements of sibling elements) behind it. This means two things: - Each
.cell must precede the element it wants to control ( .square in this case). - We can't put these
.cell in a container, if we do that the .content element will no longer be their sibling element.
Positioning cells There are many ways to position .cells . For example, we can use position: absolute and set their top and left properties; or we can convert the position through transform ; but the simplest option is to use display: grid .
body {
background-color: #000;
height: 100vh;
display: grid;
grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
width: 100%;
height: 100%;
border: 1px solid gray;
z-index: 2;
} border is just temporary, in development so we can see the grid on the screen, will be removed later.
z-index is very important because we want the cell to appear on top of the content. Here is what we have completed so far:
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<!-- 97 more cells -->
<div class="content">
<div class="square"></div>
</div>
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: black;
height: 100vh;
display: grid;
grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
width: 100%;
height: 100%;
border: 1px solid gray;
z-index: 2;
}
.content {
--positionX: 0;
--positionY: 0;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.square {
width: 100px;
height: 100px;
background: white;
} 
Adding Value We want to set the values of --positionX and --positionY through .cell . When we hover over the first (left column) .cell , the --positionX value should be 0 . When we hover over .cell in the second column, the value should be 1 . Third 2 , and so on. The same is true for y軸. When we hover over the first row (top) .cell , --positionY should be 0 , when we hover over the cell in the second row, the value should be 1 , etc. 
A black ten by ten square grid with white borders and numbers arranged in order from left to right. The numbers in the image represent the number of each cell in the grid. If we take a single .cell as an example — cell 42 — we can select it using :nth-child() : But we need to remember a few things: - We only want this selector to take effect when the cell is
hover over, so we need to give it the attachment :hover . - We want to select the
.content element rather than the cell itself, so we need to use the general sibling selector ~ to do this.
So now, to set --positionX to 1 and --positionY to 3 when the 42nd cell is hover , you would do this:
.cell:nth-child(42):hover ~ .content {
--positionX: 1;
--positionY: 3;
} But with 100 cells, who wants to do this 100 times! ? There are a few ways to make this easier: - We use a
Sass @for loop to loop through all 100 cells and do some math, setting --positionX and --positionY values for each loop. - To separate the x-axis and y-axis, use
:nth-child function notation to select each row and column separately. - Combining both approaches, use both
Sass @for loop and the :nth-child functional notation.
I've thought carefully about what would be the simplest and best approach, although all approaches have pros and cons. Based on the amount of code to write, the quality of the compiled code, and the mathematical complexity, I ultimately chose the third approach. If you have a better approach, let me know in the comments. Setting values with @for loop
@for $i from 0 to 10 {
.cell:nth-child(???):hover ~ .content {
--positionX: #{$i};
}
.cell:nth-child(???):hover ~ .content {
--positionY: #{$i};
}
} This is a basic loop framework, and we need to loop 10 times because the grid constructed above has 10 rows and 10 columns. Split the grid into x軸and y軸, set --positionX for each column and --positionY for each row. What we need to do now is to find a suitable mathematical expression and fill it in the ??? to select each row and column. Let's start with x軸Going back to our grid image with numbers above, we can see that all of the cells in第2列have numbers that are 10的倍數加2 . The cells in第2列are 10的倍數加3 ... Now, let's convert this into a functional expression for :nth-child . Here is what column 2 can be represented as: - 10n means select every multiple of 10.
- 2 is the column number, and in our loop, we will replace the column number with
#{$i +1] to repeat in sequence.
.cell:nth-child(10n + #{$i + 1}):hover ~ .content {
--positionX: #{$i};
} Now let's deal with the y-axis Look at the grid image again and focus on第4行, where the grid numbers are between 41與50 . The grid numbers for第5行are between 51與60 and so on. To select each row, we need to define its range. For example, the range for the fourth row is:
.cell:nth-child(n + 41):nth-child(-n + 50) (n + 41) is the start of the range.
(-n + 50) is the end of the range.
Now, we use $i值to replace the numbers in the mathematical formula. For the start of the range, we get (n + #{10 * $i + 1}) and for the end of the range we get (-n + #{10 * ($i + 1)}) . Therefore, the final @for loop is:
@for $i from 0 to 10 {
.cell:nth-child(10n + #{$i + 1}):hover ~ .content {
--positionX: #{$i};
}
.cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
--positionY: #{$i};
}
} Mapping complete! When we hover over the element, the values of --positionX and --positionY change according to the mouse position. This means we can use them to control elements within our content. Handling custom attributes Ok, now that we have mapped the mouse position to two custom properties, the next thing is to use them to control the width and height values of the .square element. Let's start with the width. Let's say we want the .square element to have a minimum width of 100px (i.e. when the mouse cursor is on the left side of the screen). We also want it to grow 20px for every step the mouse cursor moves to the right. Using calc() , we can achieve:
.square {
width: calc(100px + var(--positionX) * 20px);
} For the height we do the same thing, but use --positionY instead:
.square {
width: calc(100px + var(--positionX) * 20px);
height: calc(100px + var(--positionY) * 20px);
} That's it! Now we have a simple .square element with width and height controlled by the mouse position. Move the mouse cursor around the interface to see how the width and height of the square change accordingly. Below is the complete code for the entire example.
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<!-- 97 more cells -->
<div class="content">
<div class="square"></div>
</div>
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: black;
height: 100vh;
display: grid;
grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
width: 100%;
height: 100%;
// border: 1px solid gray;
z-index: 2;
}
@for $i from 0 to 10 {
.cell:nth-child(10n + #{$i + 1}):hover ~ .content {
--positionX: #{$i};
}
.cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
--positionY: #{$i};
}
}
.content {
--positionX: 0;
--positionY: 0;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.square {
width: calc(100px + var(--positionX) * 20px);
height: calc(100px + var(--positionY) * 20px);
background: white;
transition: all 0.3s;
} 
I added a small transition effect to make it look smoother. Of course, this is not necessary. I also commented out border of .cell element. Let's try an alternative approach There might be a situation where you want to "bypass" --positionX and --positionY and set the final value directly in @for循環. For our example, this can be achieved as follows:
@for $i from 0 to 10 {
.cell:nth-child(10n + #{$i + 1}):hover ~ .content {
--squareWidth: #{100 + $i * 20}px;
}
.cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
--squareHeight: #{100 + $i * 20}px;: #{$i};
}
} The .square element can then customize its properties like this:
.square {
width: var(--squareWidth);
height: var(--squareHeight);
} This approach is a bit more flexible as it allows for more advanced Sass math (and string) functions, but the main principles are exactly the same as in our example. What's next? Well, the rest is up to you to decide how to use it – and the possibilities are endless! Can you take the technique of mapping the mouse position in CSS a step further? Here are a few examples of page graphics that change with the mouse: Jumping particles 
3D Text 
Perspective image 
Typewriter effect 
Article address: https://www.cnblogs.com/dragonir/p/14557203.html Author: dragonir This is the end of this article about mapping the mouse position in CSS and controlling the page elements by moving the mouse. For more relevant CSS mapping mouse position content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!
| 
