Javascript 不可单击但可悬停的伪元素

我正在使用CSS构建一个星级元素。 我制作了一组可点击的单选按钮作为粉色元素。当我单击这些元素时，它们后面的所有元素都变成灰色，它们前面的所有元素都变成粉红色

我想在它们上设置一个悬停，所以我将所有的粉红色设置为在悬停时变为灰色

问题是当我在灰色中徘徊时，它们已经是灰色了，所以没有任何变化

我正在尝试的解决方案是在单选按钮顶部设置五个伪元素，以便在悬停时将它们设置为粉红色。这些伪元素永远不应该是可点击的，所以永远不应该从灰色变为粉色

问题是我不能点击伪元素，因为它们在上面

如果我为伪元素指针事件提供所有div:none，则不会出现悬停。 如果我设置一个div来包装这些伪元素的div，它们将悬停，但仍然无法单击

有没有办法做到这一点？也许有更好的办法

代码如下：

* { 填充：0； 保证金：0； } .分区{ 显示器：flex； 弯曲方向：行； 背景：兰花； 宽度：500px； 高度：200px； } .支架包装{ 排名：0； 左：0； 位置：绝对位置； 字体大小：100px； 颜色：浅粉色； 显示器：flex； 弯曲方向：行； 宽度：500px； 高度：200px； } 输入{ 外观：无； 字体大小：100px； 颜色：浅粉色； } 输入：：之前{ 位置：相对位置； 内容：'\2602'； } .霍尔德：以前{ 内容：'\2601'； } 输入：选中~：：之前{ 颜色：333； } .holder:悬停~：：之前{ 颜色：333； }

---

实际上，问题是你们试图用css来实现这一点，这就是为什么你们要面对这个问题，你们应该用javascript或jquery来实现，在悬停时，你们应该在卷展栏上添加css元素，然后删除，若用户点击，那个么悬停事件应该被保持。这可以解决您的问题

实际上，问题是您试图使用css实现这一点，这就是您面临此问题的原因，您应该使用javascript或jquery来解决此问题，在悬停时，您应该在卷展栏上添加css元素，然后在用户单击时删除，然后悬停事件应该保持。这可以解决您的问题

* { 填充：0； 保证金：0； } .分区{ 显示器：flex； 弯曲方向：行； 背景：兰花； 宽度：500px； 高度：200px； 不透明度：1； } 输入{ 外观：无； 字体大小：100px； 颜色：黑色； } 输入：：之前{ 位置：相对位置； 内容：\2602； 颜色：黑色； 不透明度：1； 过渡：不透明度0.3s缓进缓出； } 输入：焦点{ 大纲：无； } 输入：选中~：：之前{ 不透明度：0.3 } 输入：悬停~：：之前{ 不透明度：0.2 } * { 填充：0； 保证金：0； } .分区{ 显示器：flex； 弯曲方向：行； 背景：兰花； 宽度：500px； 高度：200px； 不透明度：1； } 输入{ 外观：无； 字体大小：100px； 颜色：黑色； } 输入：：之前{ 位置：相对位置； 内容：\2602； 颜色：黑色； 不透明度：1； 过渡：不透明度0.3s缓进缓出； } 输入：焦点{ 大纲：无； } 输入：选中~：：之前{ 不透明度：0.3 } 输入：悬停~：：之前{ 不透明度：0.2 }

---

惊人的CSS工作。非常感谢你。祝贺谢谢很高兴我能帮上忙。真是了不起的CSS工作。非常感谢你。祝贺谢谢很高兴我能帮忙。