当前位置：首页 > article >正文

使用 SASS 与 CSS Grid 实现鼠标悬停动态布局变换效果

article 2025/9/15 11:37:44

在这里插入图片描述

最终效果概述

页面为 3x3 的彩色格子网格；
当鼠标悬停任意格子，所在的行和列被放大；
使用纯 CSS 实现，无需 JavaScript；
利用 SASS 的模块能力大幅减少冗余代码。

HTML 结构

我们使用非常基础的结构，9 个 .item 放在 .container 容器中：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>

SASS + CSS Grid 样式详解

1. 设置基本布局

body {background-color: #23262d;
}.container {width: 480px;height: 400px;margin: 50px auto;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;gap: 10px;transition: 0.5s;
}

我们为 .container 设置了一个固定尺寸的 3x3 网格，并加了 transition 来实现动画过渡。

2. 为每个格子设置不同颜色

@for $i from 1 through 9 {.item:nth-child(#{$i}) {background: hsl($i * 40deg, 100%, 60%);}
}

利用 HSL 色彩空间，我们为每个格子设置了不同色相，让它们具有渐变的彩虹效果。

3. 交互式动态布局（核心逻辑）

@use "sass:list";
@use "sass:math";@for $i from 1 through 9 {.container:has(.item:nth-child(#{$i}):hover) {$r: math.floor(math.div($i - 1, 3) + 1);$c: ($i - 1) % 3 + 1;$arr: 1fr 1fr 1fr;$rows: list.set-nth($arr, $r, 2fr);$cols: list.set-nth($arr, $c, 2fr);grid-template-columns: $cols;grid-template-rows: $rows;}
}

解释一下这段代码的巧妙之处：

@for 循环处理每一个 .item;
通过 SASS 的数学模块计算出第几个格子对应的行（$r）和列（$c）；
使用 list.set-nth() 将第 $r 行和第 $c 列的比例设为 2fr，其他保持 1fr；
利用 :has() 选择器监听每个格子的 hover 状态，进而修改 .container 的布局。

完整代码

index.scss

@use "sass:list";
@use "sass:math";body {background-color: #23262d;
}.container {width: 480px;height: 400px;margin: 0 auto;margin-top: 50px;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;gap: 10px;transition: 0.5s;
}@for $i from 1 through 9 {.item:nth-child(#{$i}) {background: hsl($i * 40deg, 100%, 60%);}// 选择子元素，更改父元素：当容器的子元素被鼠标移入时，父元素样式生效.container:has(.item:nth-child(#{$i}):hover) {// 移入某个子元素时，改变父元素的行列比例$r: math.floor(math.div($i - 1, 3) + 1);$c: ($i - 1) % 3 + 1;$arr: 1fr 1fr 1fr;$rows: list.set-nth($arr, $r, 2fr); // 将第 $c 行的宽度改为 2fr$cols: list.set-nth($arr, $c, 2fr); // 将第 $c 列的宽度改为 2frgrid-template-columns: $cols;grid-template-rows: $rows;}
}

总结

技术点	说明
CSS Grid	实现基本的行列布局和比例控制
SASS 循环 + 模块	自动生成 9 套不同的布局规则
`:has()` 选择器	CSS4 的新特性，实现“父级根据子级状态变化”
`transition`	平滑过渡布局变化

浏览器兼容性提示

:has() 是一个 CSS4 选择器，目前主流浏览器如 Chrome、Edge 和 Safari 已支持，但 Firefox 仍不支持（截至 2025 年）。部署到生产环境前，请根据用户群体权衡。

使用 SASS 与 CSS Grid 实现鼠标悬停动态布局变换效果

最终效果概述页面为 3x3 的彩色格子网格；当鼠标悬停任意格子，所在的行和列被放大；使用纯 CSS 实现，无需 JavaScript；利用 SASS 的模块能力大幅减少冗余代码。 HTML 结构我们使用非常基础的结构，9 个 .i…...

编程日记 2025/9/6 14:21:58

Node.js 全栈开发方向常见面试题

Node.js 全栈开发”方向的面试题**，这类岗位通常包括： 后端：Node.js（Express/Nest）、数据库、REST API、安全、部署等前端：React/Vue（部分可能含 Next.js）、API 调用、状态管理等 …...

编程日记 2025/7/9 17:38:47

Spring如何实现组件扫描与@Component注解原理

Spring如何实现组件扫描与Component注解原理注解配置与包扫描的实现机制一、概述：什么是注解配置与包扫描？二、处理流程概览三、注解定义ComponentScope 四、核心代码结构1. ClassPathScanningCandidateComponentProvider2. ClassPathBeanDefinitionSca…...

编程日记 2025/9/6 14:38:12

历年四川大学计算机保研上机真题

2025四川大学计算机保研上机真题 2024四川大学计算机保研上机真题 2023四川大学计算机保研上机真题在线测评链接：https://pgcode.cn/school 分数求和题目描述有一分数序列： 2 / 1 2/1 2/1, 3 / 2 3/2 3/2, 5 / 3 5/3 5/3, 8 / 5 8/5 8/5, 13 /…...

编程日记 2025/9/15 9:36:17

gcc符号表生成机制

符号表生成机制我们以C语言的编译链接过程为例，详细讲解符号表（Symbol Table）的流程，涵盖编译和链接两个阶段。理解符号表是理解链接器如何解决符号引用（如函数、变量）的关键。符号表分为两种&#xff…...

编程日记 2025/8/4 12:52:53

达梦数据库 Windows 系统安装教程

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C、C#等开发语言，熟悉Java常用开…...

编程日记 2025/9/6 14:39:17

unix/linux source 命令，其基本概念、定义、性质、定理

从计算机科学的角度，特别是形式语言、操作系统和编程语言设计的角度来看，source (或 .) 命令虽然看似简单，但其背后也蕴含着一些核心的概念、定义、性质和可以类比的“定理”（或者说，更准确地是“设计原则”或“行为模式”）。让我们尝试从一个更理论和结构化的视角来剖…...

编程日记 2025/8/12 16:53:36

【Java EE初阶】计算机是如何⼯作的

计算机是如何⼯作的计算机发展史冯诺依曼体系（Von Neumann Architecture）CPU指令（Instruction）CPU 是如何执行指令的（重点） 操作系统（Operating System）进程(process) 进程 PCB 中的…...

编程日记 2025/9/6 14:39:26

RAG理论基础总结

目录概念流程文档收集和切割读取文档转换文档写入文档向量转换和存储搜索请求构建向量存储工作原理向量数据库文档过滤和检索检索前检索检索后查询增强和关联 QuestionAnswerAdvisor查询增强高级RAG架构自纠错 RAG（C-RAG&#xf…...

编程日记 2025/9/6 14:39:29

列表推导式（Python）

[表达式 for 变量 in 列表] 注意：in后面不仅可以放列表，还可以放range ()可迭代对象 [表达式 for 变量 in 列表 if 条件]...

编程日记 2025/9/6 14:42:48

嵌入式RTC工作原理及应用场景

20ppm 是衡量 RTC（实时时钟）精度的关键指标，表示每百万秒（约11.57天）的最大时间误差范围。以下是通俗易懂的解释： 1. ppm 的含义 ppm Parts Per Million（百万分之一） 1 ppm 1/1,…...

编程日记 2025/7/30 15:46:27

目录 1. Introduction of Deep Learning1.1. Neural Network - A Set of Function1.2. Learning Target - Define the goodness of a function1.3. Learn! - Pick the best functionLocal minimaBackpropagation 2. Tips for Training Deep Neural Network3. Variant of Neural…...

编程日记 2025/9/15 9:37:18

Go语言常见接口设计技巧-《Go语言实战指南》

在 Go 中，接口是连接代码组件的桥梁。合理设计接口可以大幅提升程序的可维护性、可扩展性和测试友好性。本章将分享 Go 开发中常见的接口设计技巧与最佳实践。一、接口设计原则 1. 面向接口编程，而非面向实现编程尽量使用接口类型作为函数参数或返回值…...

编程日记 2025/8/10 23:09:21

python打卡训练营打卡记录day43

复习日作业： kaggle找到一个图像数据集，用cnn网络进行训练并且用grad-cam做可视化进阶：并拆分成多个文件数据集来源：Flowers Recognition 选择该数据集原因： 中等规模：4242张图片 - 训练快速但足够展示效…...

编程日记 2025/9/13 20:59:54

Camera相机人脸识别系列专题分析之十一：人脸特征检测FFD算法之低功耗libvega_face.so人脸属性(年龄，性别，肤色，微笑，种族等)检测流程详解

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了：Camera相机人脸识别系列专题分析之十：人脸特征检测FFD算法之低功耗libvega_face.so人脸识别检测流程详解这一篇我们开始讲： Camera相机人脸识别系列专题分析之十一：人脸特征检测FFD算法之低功耗lib…...

编程日记 2025/9/11 20:36:37

解决：输入SSH后，仍无法通过网址登录以及紧接着的新问题Permission denied(publickey,password).

现象： 管理员: Windows PowerShell输入SSH后，仍无法通过网址登录例如输入你的ssh命令：ssh -CNg -L xxxx:127.0.0.1:xxxx rootaaaaaaaaa.com -p yyyyy 得到终端提示：ssh无法识别为 cmdlet、函数、脚本文件或可运行程序的名称。解…...

编程日记 2025/8/8 20:55:19

【QT控件】QWidget 常用核心属性介绍 -- 万字详解

目录一、控件概述二、QWidget 核心属性 2.1 核心属性概览 2.2 enabled 编辑 2.3 geometry 2.4 windowTitle 2.5 windowIcon 使用qrc文件管理资源 2.6 windowOpacity 2.7 cursor 2.8 font 编辑 2.9 toolTip 2.10 focusPolicy 2.11 styleSheet QT专栏&…...

编程日记 2025/9/6 14:39:16

uniapp-商城-77-shop（8.2-商品列表，地址信息添加，级联选择器picker）

地址信息，在我们支付订单上有这样一个接口，就是物流方式，一个自提，我们就显示商家地址。一个是外送，就是用户自己填写的地址。这里先说说用户的地址添加。需要使用到的一些方式方法，主要有关于地址选择器，就是uni-data-picker级联选择。该文介绍了电商应用中地址信息处…...

编程日记 2025/9/6 14:31:11

HTTPS加密通信详解及在Spring Boot中的实现

HTTPS（Hyper Text Transfer Protocol Secure）是HTTP的安全版本，通过SSL/TLS协议为通讯提供加密、身份验证和数据完整性保护。一、HTTPS核心原理 1.加密流程概述客户端发起HTTPS请求（连接到服务器443端口）服务器返…...

编程日记 2025/9/10 2:50:00

如何让 Git 停止跟踪文件？停止后又如何恢复跟踪？

在使用 Git 管理代码时，有时我们希望某些文件不再被 Git 跟踪（比如本地配置文件、临时文件等），但保留这些文件在本地；过了一段时间，可能又需要恢复跟踪这些文件。本文将用通俗易懂的语言，教你如…...

编程日记 2025/8/1 1:31:53

【第16届蓝桥杯 | 软件赛】CB组省赛第二场

个人主页：Guiat 归属专栏：算法竞赛文章目录 A. 密密摆放（5分填空题）B. 脉冲强度之和（5分填空题）C. 25 之和D. 旗帜E. 数列差分F. 树上寻宝G. 翻转硬币H. 破解信息正文总共8道题。 A. 密密摆放&#xff0…...

编程日记 2025/9/6 14:35:37

SQL进阶之旅 Day 10：执行计划解读与优化

【SQL进阶之旅 Day 10】执行计划解读与优化开篇今天是我们的"SQL进阶之旅"系列的第10天，我们将深入探讨SQL执行计划的解读与优化技巧。随着数据库规模的增长和业务复杂度的提升，理解SQL语句在数据库引擎中的执行过程变得至关重要。执行计…...

编程日记 2025/8/9 2:48:25

AR/MR实时光照阴影开发教程

一、效果演示 1、PICO4 Ultra MR 发光的球 2、AR实时光照二、实现原理 PICO4 Ultra MR开发时，通过空间网格能力扫描周围环境，然后将扫描到的环境网格材质替换为一个透明材质并停止扫描；基于Google ARCore XR Plugin和ARFoundation进行安卓手…...

编程日记 2025/9/6 3:34:35

Visual studio 中.sln/.vcxproj/.vcxproj.filters和.vcxproj.user文件的作用

在 Visual Studio (尤其是 C 项目) 中，.sln、.vcxproj、.vcxproj.filters 和 .vcxproj.user 文件各自承担着不同的关键角色。理解它们的作用对于项目管理和协作至关重要。核心原则： .vcxproj 和 .sln 是项目/解决方案的核心定义文件，必须纳…...

编程日记 2025/8/15 1:33:58

【汽车电子入门】一文了解LIN总线

前言：LIN（Local Interconnect Network）总线，也就是局域互联网的意思，它的出现晚于CAN总线，于20世纪90年代末被摩托罗拉、宝马、奥迪、戴姆勒、大众以及沃尔沃等多家公司联合开发，其目的是提供一…...

编程日记 2025/9/6 14:42:51

JVM学习(七)--JVM性能监控

目录一、JVM性能监控 1、JVM监控及诊断工具-命令行篇 2、JVM监控及诊断工具-GUI篇 3、JVM运行时参数一、JVM性能监控 1、JVM监控及诊断工具-命令行篇面试题： 1、你使用过Java虚拟机性能监控和故障处理工具吗? 2、怎么打出线程栈信息。 3、怎么获取 Jav…...

编程日记 2025/7/20 11:40:32

关于 java：5. Java IO 与文件操作

一、File 类（读取文件属性） 1.1 java.io.File 类概述 File 是 Java IO 中的核心类，用于表示文件或目录的路径名。它是一个抽象路径名，可以表示实际存在或不存在的文件/文件夹。 File 类提供了创建、删除、重命名、判断属性、获…...

编程日记 2025/7/7 19:13:03

【笔记】为 Python 项目安装图像处理与科学计算依赖（MINGW64 环境）

📝 为 Python 项目安装图像处理与科学计算依赖（MINGW64 环境） 🎯 安装目的说明本次安装是为了在 MSYS2 的 MINGW64 工具链环境中，搭建一个完整的 Python 图像处理和科学计算开发环境。主要目的是支持以下类型的 Pyth…...

编程日记 2025/9/12 19:40:51

【笔记】MLA矩阵吸收分析

文章目录一、张量运算的计算量1. FLOPs定义2. 张量计算顺序对计算量的影响二、MLA第一次矩阵吸收的计算量分析1. 原始注意力计算2. MLA源代码中的吸收方式3. 提前吸收4. 比较分析4.1 比较顺序1和顺序24.2 比较顺序2和顺序3 三、MLA第二次矩阵吸收的计算量分析1. 原始输出计算…...

编程日记 2025/8/9 1:27:00

600+纯CSS加载动画一键获取指南

CSS-Loaders.com 完整使用指南：600纯CSS加载动画库 🎯 什么是 CSS-Loaders.com？ CSS-Loaders.com 是一个专门提供纯CSS加载动画的资源网站，拥有超过600个精美的单元素加载器。这个网站的最大特色是所有动画都只需要一个HTML元素…...

编程日记 2025/9/14 0:12:44