解决CSS伪元素 :after 悬停或点击无响应的问题：星级评分示例_技术教程

本文旨在解决使用 CSS 伪元素 `:after` 实现星级评分功能时，悬停或点击事件无法正确触发的问题。通过分析问题的根源，提供修改后的 CSS 代码，确保 `:after` 伪元素能够响应用户的交互行为，从而实现预期的星级评分效果。主要涉及 CSS 定位、透明度控制以及伪元素选择器的正确使用。

在使用 CSS 创建交互式元素（如星级评分）时，经常会利用伪元素 :before 和 :after 来增强视觉效果和功能。然而，有时会遇到伪元素无法响应 hover 或 click 事件的问题。本教程将以星级评分的实现为例，详细讲解如何解决这个问题。

问题分析

通常，:after 伪元素无法响应交互事件的原因主要有两个：

定位问题： 伪元素可能没有相对于其父元素正确地定位，导致其位置不在鼠标事件的触发范围内。
层叠问题： 伪元素的层叠顺序可能低于其他元素，导致事件被其他元素拦截。
透明度问题： 伪元素可能初始状态是完全透明的，导致无法触发hover事件。

解决方案

为了解决上述问题，我们需要对 CSS 代码进行如下修改：

设置父元素的 position: relative;：将包含伪元素的父元素（在本例中是 label）的 position 属性设置为 relative。这使得伪元素可以相对于父元素进行定位。
设置伪元素的初始 opacity: 0;：确保 :after 伪元素在初始状态下是不可见的，通过设置 opacity: 0; 实现。

修改后的代码

以下是修改后的 CSS 代码：

.rating {
  display: flex;
}

.rating input {
  display: none;
}

.rating label {
  /* 添加 position: relative; */
  position: relative;
  display: block;
  cursor: pointer;
  width: 50px;
  background: #ccc;
}

.rating label::before {
  content: "★";
  position: relative;
  font-family: fontAwesome;
  display: block;
  font-size: 50px;
  color: #101010;
}

.rating label::after {
  content: "★";
  position: absolute;
  font-family: fontAwesome;
  /* 添加 opacity: 0; */
  opacity: 0;
  display: block;
  font-size: 50px;
  color: #1f9cff;
  top: 0;
}

.rating label:hover::after,
.rating label:hover~label::after,
.rating input:checked~label::after {
  opacity: 1;
}

完整示例

以下是完整的 HTML、CSS 和 JavaScript 代码示例：

代码解释

HTML: 创建一个包含单选框（input[type="radio"]）和标签（label）的结构。单选框用于存储评分值，标签用于显示星形图标。
CSS:
- .rating: 使用 display: flex; 使星级评分水平排列。
- input[type="radio"]: 隐藏单选框。
- label: 设置相对定位 position: relative;，设置星星的样式。
- label::before: 创建黑色的星星。
- label::after: 创建蓝色的星星，初始状态透明，通过hover和checked状态改变透明度。
JavaScript: 动态生成星级评分的 HTML 结构。