悬停效果仅适用于第一个 SVG 路径

Question

尝试使用 filter: brightness(140%); 添加悬停发光效果这适用于前半圈，但不适用于另一半圈。我试过使用 ID 而不是 classes，给它们都一样 class，尝试一个更简单的版本，两个圆圈彼此相邻，但同样的问题存在。

也许第一个 object/path 以某种方式覆盖了另一个？因为尝试使用 CSS 更改填充是不可能的，并且被 .

中的覆盖

Link to CodePen

.cls-2:hover {
  filter: brightness(140%);
}
.cls-1:hover {
  filter: brightness(140%);
}

<div class="container">
<svg id="Layer_3" data-name="Layer 3" height = 500 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.63 166.83"><defs><style>.cls-1{fill:#fbb03b;}
  .cls-2{fill:#f0f;}</style></defs><path class="cls-1" id="hcircle" d="M739.09,372.27a90.19,90.19,0,1,1-135-98.74l10.22,17a70,70,0,1,0,104.17,76.57Z" transform="translate(-561.46 -273.53)"/><path class="cls-2" d="M696.06,297.36l-13.14,15a50,50,0,1,1-74.52,65.35l-16.53,11a70,70,0,1,0,104.19-91.39Z" transform="translate(-561.46 -273.53)"/></svg>
</div>

Answer 1

您使用了错误的 class 名称并且紫色无法再变亮，将值更改为 40% 以查看有效结果，使用下面的代码

JSFiddle Example

.cls-1{fill:#fbb03b;}
.cls-2{fill:#f0f;}
.cls-1:hover{filter: brightness(140%);}
.cls-2:hover{filter: brightness(40%);}

<div class="container">
    <svg id="Layer_3" data-name="Layer 3" height = 500 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.63 166.83">
        <path class="cls-1" id="hcircle" d="M739.09,372.27a90.19,90.19,0,1,1-135-98.74l10.22,17a70,70,0,1,0,104.17,76.57Z" transform="translate(-561.46 -273.53)"/>
        <path class="cls-2" d="M696.06,297.36l-13.14,15a50,50,0,1,1-74.52,65.35l-16.53,11a70,70,0,1,0,104.19-91.39Z" transform="translate(-561.46 -273.53)"/>
    </svg>
</div>

Answer 2

颜色#f0f（品红）已经在亮度的顶端（不能超过100%），把它换成不那么亮的。

.cls-1:hover {
  filter: brightness(140%);
}
.cls-2:hover {
  filter: brightness(140%);
}

<div class="container">
<svg id="Layer_3" data-name="Layer 3" height = 500 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.63 166.83"><defs><style>.cls-1{fill:#fbb03b;}
  .cls-2{fill:#b53cb5;}</style></defs><path class="cls-1" id="hcircle" d="M739.09,372.27a90.19,90.19,0,1,1-135-98.74l10.22,17a70,70,0,1,0,104.17,76.57Z" transform="translate(-561.46 -273.53)"/><path class="cls-2" d="M696.06,297.36l-13.14,15a50,50,0,1,1-74.52,65.35l-16.53,11a70,70,0,1,0,104.19-91.39Z" transform="translate(-561.46 -273.53)"/></svg>
</div>

悬停效果仅适用于第一个 SVG 路径

Hover effect only works for first SVG path

css

svg