HTML星级评分组件：如何用按钮组合出鼠标滑过变色效果-html教程-PHP中文网

直接用无法实现滑过变色，因为原生单选按钮的:hover仅作用于小圆点本身，而用户实际悬停的是标签或自定义图标；浏览器不自动将label的悬停状态透传给关联input，更不会影响兄弟节点，故需借助~相邻兄弟选择器与dom顺序配合才能实现“滑过第n颗、前n颗全高亮”的连带效果。

html星级评分组件：如何用按钮组合出鼠标滑过变色效果

为什么直接用 `<input type="radio">` 无法实现滑过变色？

因为原生单选按钮的 :hover 只作用于按钮本身（那个小圆点），而用户实际悬停的是旁边的标签或自定义星星图标。浏览器默认不把 label 的悬停状态“透传”给关联的 input，更不会自动影响其他未被 hover 的兄弟节点。

所以常见错误是只给 label:hover 加样式，结果只能高亮当前星星，无法实现“滑过第3颗，前3颗都变色”的连带效果——这需要利用 CSS 的相邻兄弟选择器（~）和 DOM 顺序配合。

必须保证 HTML 中星星按从左到右、1→5 的顺序排列（不能倒序）
input 必须放在对应 label 前面，且用 for 或嵌套绑定，否则 input:checked ~ label 会失效
所有 input 需设为 position: absolute; opacity: 0;，既隐藏又保留可交互性

如何用纯 CSS 实现“滑过第 n 颗，1~n 全部高亮”？

核心是利用 input:hover ~ label 和 input:checked ~ label 的组合匹配。前提是：每个 input 的 id 要和它后面所有 label 的 for 属性一致，且所有 input 和 label 在同一层级、按评分顺序线性排列。

<div class="star-rating">
  <input type="radio" name="rating" id="star5" value="5"><label for="star5">★</label>
  <input type="radio" name="rating" id="star4" value="4"><label for="star4">★</label>
  <input type="radio" name="rating" id="star3" value="3"><label for="star3">★</label>
  <input type="radio" name="rating" id="star2" value="2"><label for="star2">★</label>
  <input type="radio" name="rating" id="star1" value="1"><label for="star1">★</label>
</div>

对应关键 CSS：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

input:hover ~ label, input:hover + label —— 捕获悬停时“当前及后续所有 label”，但我们要的是“前面”，所以得靠反向顺序写法（见下一条）
实际生效的是：input#star3:hover ~ label, #star3:checked ~ label，再配合 label 的 float: right 或 flex-direction: row-reverse 让 DOM 顺序与视觉顺序相反
更稳妥做法：把 input 放在 label 后面，改用 label:hover ~ input 不行（~ 是向后选），所以主流方案仍是 DOM 正序 + flex-direction: row-reverse

移动端点击区域太小，怎么扩大触控范围又不破坏样式？

原生 label 点击区域默认仅限文字/图标本身，手指点不准。不能简单加 padding，否则星星间距崩坏；也不能用 font-size 拉大，会失真。

给 label 设 display: inline-flex; align-items: center; justify-content: center;，再加 min-width: 40px; min-height: 40px;
用 transform: scale(1.2) 配合 transition 实现悬停放大，比单纯调大字体更可控
关键：在 label 上加 cursor: pointer;，并确保 pointer-events: auto;（某些重置 CSS 会设成 none）
避免用 z-index 层叠，否则 iOS Safari 可能触发 300ms 延迟