本文旨在解决在使用 CSS `:after` 伪元素实现星级评分等交互效果时，遇到的无法响应 hover 或 click 事件的问题。通过分析问题代码，找出关键缺失的 CSS 属性，并提供修复后的代码示例，帮助开发者理解并解决类似问题。
在使用 CSS 创建交互式元素，特别是依赖 :after 伪元素时，可能会遇到伪元素无法正确响应鼠标悬停（hover）或点击（click）事件的情况。这通常是由于缺少关键的 CSS 属性配置导致的。下面我们将通过一个星级评分的例子来详细说明这个问题以及如何解决。
问题分析
在提供的代码中，星级评分的实现依赖于 :before 和 :after 伪元素来显示星星。:before 用于显示默认的黑色星星，:after 用于显示高亮的蓝色星星。问题在于，蓝色星星（:after）并没有按照预期在鼠标悬停或点击时显示。
立即学习“前端免费学习笔记（深入）”；
解决方案
解决这个问题需要添加两个关键的 CSS 属性：
- position: relative;: 需要将 label 元素的 position 设置为 relative。 伪元素 :after 使用了 position: absolute; 定位，它的定位参照是最近的已定位祖先元素。如果没有设置 position: relative;， :after 元素将会相对于 body 元素进行定位，导致位置错乱，并且无法正确响应 label 上的事件。
- opacity: 0;: 需要将 :after 伪元素的 opacity 默认设置为 0，使其初始状态下不可见。然后，通过 CSS 的 hover 和 checked 状态来改变 opacity 为 1，使其显示。
修改后的代码
下面是修改后的 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 代码示例：
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet" />
<style>
.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;
}
</style>
</head>
<body>
<div id="23"></div>
<script>
var numbersDiv = document.getElementById("23");
var aa = document.createElement("div");
aa.className = "rating";
for (let i = 0; i < 5; i++) {
var tempStar = document.createElement("input");
tempStar.setAttribute("type", "radio");
tempStar.setAttribute("name", "star");
var tempStarId = "star" + i;
tempStar.id = tempStarId;
var tempLabel = document.createElement("label");
tempLabel.setAttribute("for", tempStarId);
aa.appendChild(tempStar);
aa.appendChild(tempLabel);
}
numbersDiv.appendChild(aa);
</script>
</body>
</html>注意事项
- 确保引入了 Font Awesome 图标库，否则星星将无法正确显示。
- 在实际项目中，可以根据需要调整星星的大小、颜色和样式。
- 可以根据需求修改hover和checked的样式，来实现更丰富的交互效果。
总结
当使用 CSS 伪元素 :after 创建交互式效果时，务必注意元素的定位和可见性。通过设置 position: relative; 使伪元素相对于其父元素定位，并使用 opacity 控制其可见性，可以解决伪元素无法响应 hover 或 click 事件的问题。理解这些关键点能够帮助开发者更好地利用 CSS 创建丰富的用户界面。
