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

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

本文介绍一种无需 javascript 的纯前端方案，通过语义化 html 结构与精准 css 选择器，实现五星评分点击跳转、悬停高亮及“前缀联动”效果（即悬停某星时，其左侧所有星星同步变色）。

本文介绍一种无需 javascript 的纯前端方案，通过语义化 html 结构与精准 css 选择器，实现五星评分点击跳转、悬停高亮及“前缀联动”效果（即悬停某星时，其左侧所有星星同步变色）。

要让五星评分既支持点击跳转，又保持悬停时的视觉反馈（包括当前星及左侧所有星变黄），关键在于将交互载体（）作为实际可点击元素，并通过 CSS 精确控制其伪元素与继承关系。原始代码中将 ★ 放在 .star 的 ::before 伪元素内，而标签本身无尺寸、不可点击；同时嵌套结构导致 :hover 层叠影响子元素，破坏独立交互逻辑。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

✅ 正确实现要点

将星号内容移入内部：使用 a::before 生成 ★，确保链接本身具备渲染内容和点击区域；
解除嵌套结构干扰：避免
嵌套嵌套（原代码中 5 层嵌套易引发样式穿透），改为并列兄弟元素；
精准控制悬停范围：使用 .star:hover > a 仅影响当前星的链接，再配合相邻兄弟选择器实现“左侧联动”。

✅ 推荐 HTML 结构（扁平化、语义清晰）

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

✅ 对应 CSS（支持悬停联动 + 可点击）

.star-rating {
  display: flex;
  gap: 4px; /* 星星间距 */
  float: right;
}

.star {
  display: inline-flex;
}

.star a {
  display: block;
  width: 1.2em;
  height: 1.2em;
  color: #ddd; /* 默认灰色星 */
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.star a::before {
  content: '★';
  color: inherit;
}

/* 当前星及左侧所有星高亮（利用相邻兄弟选择器）*/
.star:hover > a,
.star:hover ~ .star > a {
  color: #ffcc00;
}

/* 可选：点击后状态提示（如已评分）*/
.star a:visited {
  color: #ff9900;
}