悬停效应只适用于第一个SVG路径

Question

尝试添加一个悬停辉光效果使用filter: brightness(140%);，这是工作的前半圆，但不是另一个。我尝试使用ID而不是类，给它们所有相同的类，尝试一个简单的版本，两个圆圈相邻，同样的问题也存在。

也许第一个对象/路径以某种方式压倒了另一个对象/路径？控件中不可能使用CSS更改填充。

链接到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

您使用了错误的类名，紫颜色不能再亮了，请将值更改为40%以查看工作结果，请使用下面的代码

JSFiddle实例

.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>

​