星级评分组件显示异常求助：Hover/选中星星仅显示部分内容

针对你遇到的星星悬停/选中仅显示部分的问题，大概率是元素尺寸不匹配、背景图定位错误或者宽度计算逻辑偏差导致的，以下是具体排查和修复步骤：

核心问题排查点 #

• 单颗星星的width/height是否与星星图标的实际尺寸比例一致？比如图标是24x24px，元素却设成了20x24px，会导致背景图被裁剪。
• 评分容器总宽度是否等于「单颗星宽度 × 总星数」？比如5颗24px的星，容器必须设为120px，否则背景重复时会错位。
• 选中/悬停的宽度计算是否正确？比如4颗星对应的宽度应该是80%（4/5），而不是40%。
• 背景图的background-size是否设置合理？如果用cover可能会拉伸，建议设为单颗星的具体尺寸（如24px 24px）。

修复后的示例代码 #

HTML结构 #

<div class="rating-container">
  <div class="star-rating" data-current-rating="0">
    <span class="star" data-rating="1"></span>
    <span class="star" data-rating="2"></span>
    <span class="star" data-rating="3"></span>
    <span class="star" data-rating="4"></span>
    <span class="star" data-rating="5"></span>
    <div class="star-fill"></div>
  </div>
</div>

CSS样式 #

.rating-container {
  font-size: 0; /* 消除inline-block元素间隙 */
}

.star-rating {
  position: relative;
  display: inline-block;
  width: 120px; /* 5×24px，与单颗星宽度严格匹配 */
  height: 24px;
}

.star {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: url('empty-star.png') no-repeat center;
  background-size: 100% 100%;
}

.star-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: url('filled-star.png') repeat-x left top;
  background-size: 24px 24px; /* 与单颗星尺寸完全对齐 */
  pointer-events: none; /* 不干扰下层星星的点击事件 */
}

/* 悬停状态 */
.star-rating:hover .star[data-rating="1"] ~ .star-fill { width: 20%; }
.star-rating:hover .star[data-rating="2"] ~ .star-fill { width: 40%; }
.star-rating:hover .star[data-rating="3"] ~ .star-fill { width: 60%; }
.star-rating:hover .star[data-rating="4"] ~ .star-fill { width: 80%; }
.star-rating:hover .star[data-rating="5"] ~ .star-fill { width: 100%; }

/* 选中状态 */
.star-rating[data-current-rating="1"] .star-fill { width: 20%; }
.star-rating[data-current-rating="2"] .star-fill { width: 40%; }
.star-rating[data-current-rating="3"] .star-fill { width: 60%; }
.star-rating[data-current-rating="4"] .star-fill { width: 80%; }
.star-rating[data-current-rating="5"] .star-fill { width: 100%; }

额外注意事项 #

1. 如果你的代码全局设置了box-sizing: border-box，建议给星星元素单独设置box-sizing: content-box，避免padding/border挤占内容宽度。
2. 检查星星图标本身是否存在尺寸异常，比如图标边缘有多余空白，导致显示不全。
3. 若使用伪元素（:before/:after）实现星星，要确保伪元素的width/height、position设置正确，没有被父容器的overflow: hidden错误裁剪。

内容的提问来源于stack exchange，提问作者New_DEV