CSS - Hover 對線性漸變背景的影響

Question

我正在嘗試在我的 css 屬性box上添加 hover 效果，該屬性框正在使用 css 創建餅圖。 我想在 hover 上添加一個不透明度更改，以提供更具交互性的外觀和感覺。

創建偽類時:hover目前沒有任何效果。 我相信這是由於background: linear-gradient來實現餅圖外觀。

我試圖通過使用:before class 並為此偽類添加 rgba 背景然后添加:hover效果來解決此問題，這對我的顯示也沒有影響。

這是我嘗試過的代碼片段：

 .box { --v:calc( ((18/5) * var(--p) - 90)*1deg); width:100px; height:100px; display:inline-block; border-radius:50%; background: linear-gradient(var(--v), #ffffff 50%,transparent 0) 0 /calc(100% - var(--s)*100%), linear-gradient(var(--v), #002F65 50%,transparent 0) 0 /calc(var(--s)*100%), linear-gradient(to right, #ffffff 50%,#002F65 0); }.box:before { width: 78px; height: 78px; display: inline-block; border-radius: 50%; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)) }.box:hover:before { opacity: 1 }

 <div class="box" style="--p:45;--s:0"></div>

Answer 1

.box:hover:before {
   opacity: 1;
 }

不透明度值為 1 表示默認值，因此如果您將其值降低為“0.5”，那么它將為您提供淡出效果。 此外，0 的值會給你一個透明的效果。 因此，您可以在 0 到 1 之間選擇值。

.box:hover:before {
   content: '';
   opacity: 0.5;
 }

要在使用:before時查看結果，您應該添加content:''; 財產。

 .box { --v:calc( ((18/5) * var(--p) - 90)*1deg); width:100px; height:100px; display:inline-block; border-radius:50%; background: linear-gradient(var(--v), #ffffff 50%,transparent 0) 0 /calc(100% - var(--s)*100%), linear-gradient(var(--v), #002F65 50%,transparent 0) 0 /calc(var(--s)*100%), linear-gradient(to right, #ffffff 50%,#002F65 0); }.box:before { /* added 1 line of code; changed width, height, and border's value */ content: ''; width:100px; height:100px; border-radius: 50%; display: inline-block; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)); }.box:hover:before { content: ''; opacity: 0.5; }

 <div class="box" style="--p:45;--s:0"></div>

如果你想讓整個餡餅褪色，你可以試試這個

    .box:hover{
       content: '';
       opacity: 0.5;
     }