Question

我试图在css属性box上添加悬停效果，该属性正在使用css创建饼图。我想在悬停上添加不透明度更改，以使其更具交互性。

在创建伪类:hover时，它目前没有任何作用。我相信是由于要使用background: linear-gradient以获得饼图外观。

我尝试通过使用:before类并向该伪类添加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;
     }

CSS-线性渐变背景上的悬停效果

1 个答案: