如何用纯 HTML 和 CSS 实现可点击跳转的五星评分系统-html教程-PHP中文网

如何用纯 HTML 和 CSS 实现可点击跳转的五星评分系统

本文介绍如何构建一个纯前端的五星评分组件：点击任意星星即可跳转至对应评分链接，同时支持悬停时高亮当前星及左侧所有星星，无需 javascript 即可实现交互效果。

本文介绍如何构建一个纯前端的五星评分组件：点击任意星星即可跳转至对应评分链接，同时支持悬停时高亮当前星及左侧所有星星，无需 javascript 即可实现交互效果。

要实现一个既可点击跳转、又支持“悬停即高亮当前星及左侧所有星”的五星评分系统，关键在于语义结构合理化 + CSS 选择器精准控制。原始代码中将标签嵌套在

内部，但未赋予其可点击区域（::before 伪元素挂载在父容器上，而本身无宽高），导致点击无效；同时嵌套结构引发 :hover 层叠干扰，使悬停样式无法按预期作用于“左侧连续星星”。

✅ 正确结构：扁平化 DOM + 伪元素挂载到  上

首先，修正 HTML 结构为同级并列（避免深层嵌套），每个独立包裹一颗星，语义清晰且便于样式控制：

<div class="star-rating">
  <a href="/rate?r=1" class="star">★</a>
  <a href="/rate?r=2" class="star">★</a>
  <a href="/rate?r=3" class="star">★</a>
  <a href="/rate?r=4" class="star">★</a>
  <a href="/rate?r=5" class="star">★</a>
</div>

? 说明：直接使用 ★ 字符替代 ::before，更简洁可靠；若需字体图标或 SVG，也可保留伪元素，但必须绑定在上。

Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

✅ 核心 CSS：精准控制悬停与状态

.star-rating {
  display: flex;
  gap: 4px; /* 星星间距 */
  direction: ltr; /* 确保从左到右顺序 */
}

.star {
  color: #ccc;
  text-decoration: none;
  font-size: 1.5rem;
  transition: color 0.2s ease;
}

/* 悬停时：当前星及其左侧所有星变黄 */
.star:hover,
.star:hover ~ .star {
  color: #ffcc00;
}

/* 可选：点击后反馈（如访问过） */
.star:visited {
  color: #ff9900;
}

⚠️ 注意：~ 是通用兄弟选择器，配合 :hover 可自然实现“悬停第 n 颗星 → 前 n 颗均高亮”，这是纯 CSS 实现“左侧连带高亮”的核心技巧。