应将重复的 hover 效果抽离为公共工具类（如 .u-hover-effect），统一设置 transition 与基础交互行为，再通过组合语义化修饰类（如 .btn-primary、.card-lift）实现差异化表现，配合 BEM 命名与 Sass mixin 提升可维护性。
把重复的 hover 效果抽成一个公共 class，比如 .hover-effect，然后在所有需要的地方直接加这个类就行，不用每个元素都写一遍相同的 :hover 规则。
在 CSS 中集中写一次 hover 样式，覆盖常见交互需求：
transition 统一设置动效时长和缓动，比如 transition: all 0.2s ease;
color: #007bff; transition: color 0.2s; 这类代码公共 class 负责共性，个性部分仍可单独覆盖：
.hover-effect，再额外加 .btn-primary 控制默认色和 hover 色差.hover-effect.text-underline 实现下划线动画，而卡片用 .hover-effect.card-lift 做 z-index 和阴影变化避免起名随意导致后期混乱：
立即学习“前端免费学习笔记（深入）”；
.u-hover-scale（u = utility）、.js-hover-fade（js = 可被 JS 触发，也方便后续加交互）.hover1、.magic-hover —— 别人看不懂，你自己三个月后也得猜@mixin hover-effect，进一步提升复用粒度不复杂但容易忽略：hover 不是视觉“装饰”，而是用户意图的反馈信号。统一管理，既省代码，也保体验一致。
以上就是css初级项目hover样式重复代码多怎么办_通过公共class复用样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
628
收藏
取消收藏
