怎么使用CSS实现鼠标移动控制页面元素效果

　　介绍

这篇文章主要介绍怎么使用CSS实现鼠标移动控制页面元素效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

映射鼠标位置或实现拖拽效果,我们可以在<代码> JavaScript代码中做到这一点。但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript <代码> 的情况下,仍然可以实现相同的功能!

只使用CSS就可以实现模仿鼠标“点击和拖动“效果,让我们来看看如何获得用户的鼠标位置,并将其映射到CSS <代码> 自定义属性:<代码>——positionX 和<代码>——positionY>

初始化

我们的第一个<代码>演示> ——positionX 和<代码>——positionY> & lt; div 类=癱ontent"比; 　　& lt;才能div 类=皊quare"祝辞& lt;/div> 　　& lt;/div> *,*::,,*::after  { 　　,,填充:0; 　　保证金才能:0,汽车; 　　,,box-sizing: border-box; 　　} 　　body  { 　　,,背景颜色:黑色; 　　,,身高:100 vh; 　　} 　　.content  { 　　,,——positionX: 0; 　　,,——positionY: 0; 　　位置:才能,绝对; 　　,,:0;,右:,0;,底部:,0;,左:,0; 　　,,显示:flex; 　　,,justify-content:中心; 　　,,对齐项目:中心; 　　} 　　.square  { 　　,,宽度:100 px; 　　,,身高:100 px; 　　背景:才能,白色; 　　}

怎么使用CSS实现鼠标移动控制页面元素效果

这是我们最初的状态。我们这里有一个了名为<代码>。内容> & lt; div> ,它是项目的内容主体。类名为<代码>。广场的<代码> & lt; div>

我们还在内容中添加了两个自定义属性。我们将使用鼠标位置来设置这些属性的值,然后使用它们来设置<代码>。广场元素的宽高。

一旦我们为鼠标位置绘制了自定义属性,我们几乎可以使用它们来做我们想要的任何事情。例如,我们可以使用它们来设置一个绝对定位元素的<代码>前左/> 属转换性,设置<代码>背景位置> 颜色> Codepen>

网格网格

目标是在屏幕上创建一个不可见的网格,并使用<代码>:悬停伪类将每个“单元格“映射成我们自定义属性的一组值。此时,当鼠标光标移动到屏幕的右侧时,<代码>——positionX> ——positionY>

关于我网格大小及网格分块需要注意的地方:实际上我们可以使任何我们可以达到的网格尺寸。它越大,自定义属性值就越准确。但这也意味着我们将有更多网格分块区间,网格分块过多可能会导致性能问题,根据实际项目保持适当的平衡地调整网格大小是非常重要的。

现在,假如我们需要一个10×10网格,所以总共100个网格分块在我们容器中。(在实际开发中可以使用哈巴狗等语法快速创建表格,例子中100个空间全部用div <代码> 表示出来了)

& lt; div 类=癱ell"祝辞& lt;/div> 　　& lt; div 类=癱ell"祝辞& lt;/div> 　　& lt; div 类=癱ell"祝辞& lt;/div> 　　& lt; !——, 97, more  cells ——比; 　　& lt; div 类=癱ontent"祝辞 　　& lt;才能div 类=皊quare"祝辞& lt;/div> 　　& lt;/div>

由于级联关系,将<代码>。细胞元素放在<代码>。内容元素前面。

我们希望使用<代码>。细胞> 。广?

这意味着两件事:

<李>

每个<代码>。细胞> 。平方> <李>

不能把这些<代码>。细胞> 。内容

怎么使用CSS实现鼠标移动控制页面元素效果