Question

好吧，所以我用角度和svg制作了一个饼图。看起来还可以，但是它对悬停事件的反应不是很好。

<path (click)="pieClick(cat)" class="slice" [attr.fill]="getColor(i)" [attr.d]="getArc()"></path>

这是绘制饼图的路径。这里应该注意，必须从后端服务器获取颜色，因此我不能简单地将其硬编码到CSS中。

我现在拥有的CSS看起来像这样

.slice {
    cursor: pointer;
}

.slice:hover {
    fill: #333;
}

它可以工作，但最好是我只是想将悬停时的颜色变浅，而不是将其设置为#333。

这可以用纯CSS完成吗，还是我需要以某种方式将该属性映射到角度代码？

Answer 1

您可以通过在前面创建一个白色div并添加一个alpha通道使其部分透明来实现此目的。

尝试运行以下代码段，看看它是否满足您的要求。

.box {
  width: 100px;
  height: 100px;
}
.box:hover::after {
  content: "";
  background-color: rgba(255,255,255,0.25);
  width: 100%;
  height: 100%;
  display: block;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.black {
  background-color: black;
}
.yellow {
  background-color: yellow;
}

<div class="box red"></div>
<div class="box blue"></div>
<div class="box black"></div>
<div class="box yellow"></div>

Answer 2

您可以使用：

-webkit-filter: brightness(1.5);
-moz-filter: brightness(1.5);
-ms-filter: brightness(1.5);
filter: brightness(1.5);

在不知道原始颜色的情况下减轻悬停时的svg部分

2 个答案: