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

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

你可以使用：

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

Answer 2

您可以通过在前面创建一个白色 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>