bem 中禁止直接使用 .rating__star:hover，必须用 .rating__star--hovered modifier 类显式声明悬停状态，由 js 控制增删，并确保其独立生效、含完整视觉反馈与过渡动画。

直接用 .block__element:hover 是错的——它违背 BEM 的状态语义隔离原则，也掩盖了真实交互意图。

为什么不能直接写 .rating__star:hover

BEM 要求所有可感知的状态必须显式表达为 Modifier 类，而不是依赖伪类隐式推导。写 .rating__star:hover 会导致：

• 无法在移动端通过 touchstart 模拟相同反馈
• JS 无法统一控制“悬停中”状态（比如要配合键盘导航时）
• 样式被绑定到 DOM 层级和用户动作，而非组件状态，破坏可测试性
• 一旦需要支持 dark mode 下不同 hover 色，就得重写整条规则，而非只改 .rating__star--hovered 的颜色声明

.block__element--hovered 怎么配合 JS 使用

真正可控、可复用的方式是：CSS 只定义 .rating__star--hovered 样式，JS 负责添加/移除这个类。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 监听 .rating 的 mousemove，计算鼠标横坐标占比，再根据星数确定高亮数量
• 用 element.classList.toggle('rating__star--hovered', shouldHighlight) 控制每颗星
• 移动端 fallback：监听 touchstart 后立即触发一次高亮逻辑，并加 touchend 清除
• 务必防抖：节流间隔设为 16ms 或使用 requestAnimationFrame，避免频繁重排

修饰符命名必须反映真实行为，不是视觉效果

--hovered 不等于“当前被鼠标指着”，而是“处于悬停反馈状态”。这意味着：

• 它应包含完整的视觉响应：颜色变化 + 过渡动画 + 可能的缩放或阴影
• 不能只写 color: #ff9e00，还得配 transition: all 0.2s ease，否则和其他状态叠加时会冲突
• 如果组件同时有 --selected 和 --hovered，CSS 必须显式声明叠加优先级（例如 .rating__star--selected.rating__star--hovered 覆盖 hover 效果）
• 禁止用 --mouse-over 或 --is-hovering——这些词无法映射到可验证的 UI 行为

最易被忽略的一点：Modifier 类必须独立生效。删掉其他类名后，.rating__star--hovered 单独加在任意 DOM 节点上，样式仍应正确渲染——这检验了它是否真的封装了完整状态，而不是依赖父容器或兄弟元素。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！