这是一款团队成员展示墙，成员头像与姓名职位排成网格，鼠标移到哪一位，蓝色高亮块就平滑地滑到哪一位身上，同时该成员的信息浮现、标题淡出让位。高亮块不是普通圆角矩形，而是带斜切边的多边形造型，滑动时尺寸会随目标格子自动伸缩。整个效果零 JavaScript，鼠标和键盘 Tab 都能触发，是很实用的一款成品级组件。

这款团队展示墙的四个亮点

高亮块自动对位：目标格子多大它就多大，不用为每一格写坐标。
切角造型不用切图：斜切边由 CSS 直接生成，任意尺寸都不变形。
键盘同样可用：Tab 切换焦点时高亮块一样跟随，不只服务鼠标用户。
纯 CSS 实现，无脚本无依赖，接进任何页面都不冲突。

高亮块是怎么做到自动跟随并贴合的

其一，用锚点定位替代坐标计算。传统做法要监听鼠标事件、读取每个格子的位置和尺寸再赋给高亮块。这里的做法是让高亮块把被悬停的格子当作"锚"，四边直接读取锚点的边界：

position-anchor: --hovered-item;

格子多大高亮块就多大，换行、缩放、响应式全部自动跟随，一行脚本都不用写。

其二，鼠标状态的判断交给 :has()。容器通过它感知"我内部有元素正被悬停或聚焦"，进而让高亮块显形、让大标题缩小让位。这类过去必须靠脚本加类名完成的父级联动，现在纯选择器就能表达。

其三，切角造型用 corner-shape 而非裁剪。圆角半径照常写，只是把拐角形状换成斜切，因此仍然享受完整的圆角过渡动画；源码还贴心地为不支持该属性的浏览器准备了回退方案，退化后是常规圆角，观感依然完整。

怎么换成自己的团队成员

只有 HTML 与 CSS 两个文件加一个头像目录。每位成员是一个链接块，内含姓名、职位和头像，复制一段即可增删，网格会自动重排，高亮块无需任何调整。头像建议用统一尺寸的方图，视觉最整齐。

高亮块的颜色、透明度、边框、圆角与切角形状、过渡时长都集中在样式表顶部的变量区，每个变量都有注释说明。改成品牌色只需要动一个值，深浅色模式也已经做了适配。

兼容提示：锚点定位与切角造型属于较新的 CSS 能力，建议在 Chrome / Edge 125+ 上查看完整效果；不支持的浏览器会退回常规圆角样式，布局与信息展示不受影响。运行方法参见压缩包内的帮助文档。

关于这款成员展示墙的常见问题

成员数量可以随意增减吗？

可以。网格是自动排布的，增删成员只需增删对应的区块，高亮块因为绑定的是"被悬停的那一个"，不涉及任何序号或坐标，不会错位。

能改成点击展开详细介绍吗？

可以。每位成员本身就是一个链接，改成跳转到个人页，或配合锚点展开更多信息都很自然，结构上已经预留好了。

高亮块能换成其他形状吗？

能。切角是通过拐角形状属性控制的，改成圆角、内凹或直角都只是换一个值，配色和透明度同样是独立变量。

手机上没有鼠标怎么办？

窄屏下布局会自动调整为更紧凑的网格，信息完整可读；高亮跟随本身是悬停增强效果，触屏设备上不出现也不影响使用，属于典型的渐进增强。

适用场景

适合企业官网的团队介绍、关于我们、讲师与专家展示、社团成员墙等页面，也可改造成产品分类或案例导航。下载源码即可查看完整实现。