不可点击但可悬停的伪元素

Question

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

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

问题是，当我将鼠标悬停在灰色之间时，它们已经是灰色，所以没有任何变化。

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

问题是我无法点击上面的伪元素。

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

有办法实现吗？也许有更好的方法？

代码如下：

 * {
  padding: 0;
  margin: 0;
}

.div {
  display: flex;
  flex-direction: row;
  background: orchid;
  width: 500px;
  height: 200px;
}

.holder-wrapper {
  top: 0;
  left: 0;
  position: absolute;
  font-size: 100px;
  color: lightpink;
  display: flex;
  flex-direction: row;
  width: 500px;
  height: 200px;
  
}

input {
  appearance: none;
  font-size: 100px;
  color: lightpink;
}

input::before {
  position: relative;
  content: '02';
}

.holder::before {
  content: '01';
}

input:checked ~ ::before {
  color: #333;
}

.holder:hover ~ ::before {
  color: #333;
}

<div class="div">
  <input type="radio" data-rate="1" name="rating" class="rating--star" checked/>
  <input type="radio" data-rate="2" name="rating" class="rating--star" />
  <input type="radio" data-rate="3" name="rating" class="rating--star" />
  <input type="radio" data-rate="4" name="rating" class="rating--star" />
  <input type="radio" data-rate="5" name="rating" class="rating--star" />
  
  <div class="holder-wrapper">
    <div class="holder"></div>
    <div class="holder"></div>
    <div class="holder"></div>
    <div class="holder"></div>
    <div class="holder"></div>
  </div>
</div>

codepen => enter link description here

我不明白 jquery 所以如果你想 jquery 请解释一下你在做什么 c:

Answer 1

实际上问题是您尝试使用 css 来实现此目的，这就是您遇到此问题的原因，您应该使用 javascript 或 jquery 来完成此操作，悬停时您应该添加 css 在 rollout 上的元素上，然后如果用户单击则删除，然后应该保留悬停事件。这可以解决您的问题

Answer 2

* {
    padding: 0;
    margin: 0;
}

.div {
    display: flex;
    flex-direction: row;
    background: orchid;
    width: 500px;
    height: 200px;
    opacity: 1;
    

}

input {
    appearance: none;
    font-size: 100px;
    color: black;
}
input::before {
    position: relative;
    content: "02";
    color: black;
    opacity:1;
    transition: opacity 0.3s ease-in-out;
}
input:focus{
outline:none;
}
input:checked ~ ::before {
    opacity:0.3

}

input:hover ~ ::before {
    opacity:0.2
}

<input type="radio" data-rate="1" name="rating" class="rating--star" checked />
<input type="radio" data-rate="2" name="rating" class="rating--star" />
<input type="radio" data-rate="3" name="rating" class="rating--star" />
<input type="radio" data-rate="4" name="rating" class="rating--star" />
<input type="radio" data-rate="5" name="rating" class="rating--star" />

</div>

我找到了一个方法。我通过删除 holder 元素并使用不透明度值来响应悬停 (0.2) 和单击 (0.3) 来进行简化。奇怪的是 ':checked' pseudo-selector 实际上影响了鼠标右边的元素。所以我使用它。

我打算尝试 JS 方法，但访问伪元素是一场噩梦！

不可点击但可悬停的伪元素

not clickable but hoverable pseudo elements

javascript

css

hover

pseudo-class