不可點擊但可懸停的偽元素

Question

我正在使用 CSS 構建星級元素。 我制作了一組可點擊的單選按鈕作為粉紅色元素。 當我單擊這些元素時，它們之后的所有元素都變為灰色，而它們之前的所有元素都變為粉紅色。

我想在它們上設置一個 hover，所以我將所有粉紅色設置為灰色，因為我是 hover。

問題是當我通過灰色 hover 時，它們已經是灰色的，所以沒有任何變化。

我正在嘗試的解決方案是在我的單選按鈕頂部設置五個偽元素，這樣我就可以將它們設置為粉紅色，因為我是 hover。 這些偽元素不應該是可點擊的，所以不應該從灰色變為粉紅色。

問題是我無法點擊上面的偽元素。

如果我給偽元素pointer-events:none的所有div，就不會有hover。 如果我設置一個 div 來包裝這些偽元素的 div，它們將是 hover 但仍然無法單擊。

有沒有辦法做到這一點？ 也許更好的方法？

這是代碼：

 * { 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: '\2602'; }.holder::before { content: '\2601'; } 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 =>在此處輸入鏈接描述

我不明白 jquery 所以如果你想 jquery 什么，請解釋一下你在做什么 c：

Answer 1

Actually problem is you trying to achieve this using css that's why you facing this issue, you should do this using javascript or jquery, on hover you should add css on elements on rollout then remove if user clicks then hover event should be holds. 這可以解決您的問題

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: "\2602"; 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>

我找到了一個方法。 我通過刪除持有者元素並使用不透明度值來響應懸停（0.2）和單擊（0.3）進行了簡化。 奇怪的是 ':checked' 偽選擇器實際上會影響鼠標右側的元素。 所以我和那個一起工作。

我打算嘗試一種 JS 方法，但訪問偽元素是一場噩夢！