How to use CSS to achieve mouse movement control page element effects? (code example)

with the class name .squareis the element we want to control with the mouse in this example.

We also added two custom attributes 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.squareelement.

Once we draw custom properties for the mouse position, we can use them to do almost anything we want. For example, we can use them to set thetop/leftof an absolutely positioned element, control thetransformattribute, set thebackground-position, adjust thecolor, even set the content of pseudo elements, etc. We will see some such demonstration effects and correspondingCodepenproject links at the end of the article.

grid Grid

The goal is to create an invisible grid on the screen and use the:hoverpseudo-class to map each "cell" to our A set of values for a custom property. At this point, when the mouse cursor moves to the right side of the screen, the value of--positionXwill 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.

Something to note about grid size and grid tiles: We can actually make any grid size we can achieve. The larger it is, the more accurate the custom property value will be. But this also means that we will have more grid tiles. Too many grid tiles may cause performance issues. It is very important to adjust the grid size to maintain the appropriate balance according to the actual project.

Now, let's say 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 bydiv)

Due to the cascading relationship,.cell Theelement is placed before the.contentelement.

We hope to use the.cellclass to control.square. Due to the cascading relationship of CSS, an element can only control its child elements (or the child element) and the sibling element (or child element of a sibling element) located behind it

This means two things:

• Each.cellmust precede the element that needs to be controlled (.squarein this example).
• We cannot put these.cellin a container. If we do this, the.contentelements will no longer be their sibling elements.

Positioning cells

There are many ways to locate.cells. For example, we can useposition: absoluteand set theirtopandleftproperties; or we can also usetransformto transform the position ;But the easiest option is actually to usedisplay: 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; }

borderJust temporary, under development so we can see the grid on screen, will remove it later.
z-indexis very important because we want the cell to appear on top of the content.

Here's what we've done so far:

*, *::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; }

Add value

We want to do it via.cellSet the values of--positionXand--positionY.

当我们hover悬停在第一个（左列）.cell上时，--positionX值应为0。当我们悬停在第二列中的.cell上时，值应为1。第三2，等等。

y轴也是如此。当我们悬停在第一行（顶部）.cell上时，--positionY应该为0，当我们悬停在第二行的单元格上时，值应该是1，等等。

从左到右按顺序排列着白色边框和数字的黑色十乘十方格。

图像中的数字表示网格中每个单元格的编号。如果以一个单一的.cell为例——42号单元格——我们可以使用:nth-child()来选择它：

.cell:nth-child(42) { }

但我们需要记住几件事：

• 我们只希望此选择器只在hover悬停在单元格上时生效，因此我们需要给它附件:hover。
• 我们希望选择的是.content元素而不是单元格本身，因此需要使用一般兄弟选择器~来做到这一点。

因此，现在当第42个单元格处于hover状态时，要将--positionX设置为1与--positionY设置为3，需要这样做：

.cell:nth-child(42):hover ~ .content { --positionX: 1; --positionY: 3; }

但是有100个单元格，谁想这样做100次呢！？有几种方法可以使上述操作变得更容易：

• 使用Sass中的@for循环来遍历所有 100 个单元格，并做一些数学运算，每次遍历设置对应的的--positionX和--positionY值。

• 将 x 轴和 y 轴分开，用带有:nth-child的功能符号分别选择每行和每列。

• 结合这两种方法，同时使用Sass@for循环和:nth-child功能符号。

我深思熟虑过什么是最简单最好的方法，虽然所有方法都有优缺点。根据要编写的代码数量、编译代码的质量和数学复杂性方面的考虑，最终我选择了第三种方法。如果你有更好的方法，可以在评论中告诉我。

用@for循环设置值

@for $i from 0 to 10 { .cell:nth-child(???):hover ~ .content { --positionX: #{$i}; } .cell:nth-child(???):hover ~ .content { --positionY: #{$i}; } }

这是一个基本循环框架，我们需要循环10次，因为上述构造的网格有10行和10列。将网格分为x轴和y轴，对每列设置--positionX，对每行设置--positionY。现在要做的是找到一个合适的数学表达式，填到???处，来进行选择每行和每列。

让我们从x轴开始

回到我们上面带有数字的网格图像，我们可以看到第2列中所有单元格的数字是10的倍数加2。第2列中的单元格是10的倍数加3...

现在，让我们把它转换成:nth-child的功能表达式。以下是第2列可以表示为：

:nth-child(10n + 2)

• 10n表示选择每个10的倍数。
• 2 是列号，在我们的循环中，将用#{$i +1]替换列号来按顺序重复。

.cell:nth-child(10n + #{$i + 1}):hover ~ .content { --positionX: #{$i}; }

现在让我们处理y轴

再看一遍网格图像，关注第4行，网格编号介于41与50之间。第5行的网格编号在51与60之间等等。要选择每行，我们需要定义其范围。例如，第四行的范围是：

.cell:nth-child(n + 41):nth-child(-n + 50)

(n + 41)是范围的开始。
(-n + 50)是范围的结尾。
现在，我们用$i值的来代替数学公式中的数字。对于范围的开始，得到(n + #{10 * $i + 1})，对于范围结尾获得(-n + #{10 * ($i + 1)})。

因此，最终的@for循环是：

@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}; } }

映射完成！当我们悬停在元素上时，--positionX和--positionY的值会根据鼠标位置而变化。这意味着我们可以使用它们来控制内容中的元素。

处理自定义属性

好了，现在我们已经把鼠标位置映射到两个自定义属性，接下来的事情是使用它们来控制.square元素的宽度和高度值。

让我们从宽度开始，假设我们希望.square元素的的最小宽度为100px（即当鼠标光标位于屏幕左侧时），我们还希望鼠标光标向右移动的每一步都增长20px。

使用calc()，就可以实现：

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

对于高度我们做同样的操作，但用--positionY代替：

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

就是这样！现在我们有一个简单的.square元素，宽度和高度由鼠标位置控制。将鼠标光标在界面移动，查看正方形的宽度和高度如何相应地变化，下面是整个示例的完整代码。

*, *::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; }

我添加了一个小的过渡效果，看起来更顺畅。当然，这不是必须的。我也注释了.cell元素的的border。

让我们尝试一种替代方法

可能会有一种情况，即您想要"绕过"--positionX和--positionY，并将最终值直接设置在@for循环中。对于我们的例子而言，可以像下面这样实现：

@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}; } }

.square元素从而可以这样自定义属性：

.square { width: var(--squareWidth); height: var(--squareHeight); }

这种方法相比较而言更灵活一些，因为它允许更高级的Sass数学（和字符串）函数，但它的主要原理与我们示例的内容是完全相同的。

接下来呢？

好吧，剩下的就由你决定如何使用——而且可能性是无穷无尽的！你能在CSS中更进一步地使用映射鼠标位置地技巧吗？下面是几个页面图形会随着鼠标变换的例子：

• 跳动粒子

  

  演示地址：https://codepen.io/amit_sheen/pen/c402584728a49c435fefa388e1692687
  

• 3D文字

  

  演示地址：https://codepen.io/amit_sheen/pen/261df6f09d15a179b63454bb75acc191
  

• 透视图像

  

  演示地址：https://codepen.io/amit_sheen/pen/7ec61599091d3be99d503634b1b7e884
  

• 打字机效果

  、

  演示地址：https://codepen.io/amit_sheen/pen/af022e80f75789c6b80a8d0eb718f890
  

更多编程相关知识，请访问：编程视频！！