Hover effect only works for first SVG path-CodePudding

Tried adding a hover glow effect using filter: brightness(140%); This works for the first half circle, but not the other. I've tried using ID's instead of classes, giving them all the same class, trying a simpler version with two circles next to each other and the same issue is there.

Maybe the first object/path overrides the other one somehow? As trying to change the fill with CSS is not possible and is overridden by the in the .

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>

CodePudding user response：

you're using the wrong class name and that purple color cannot be brightended anymore, change the value to 40% to see a working result, use the code below

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>

CodePudding user response：

The color #f0f (Magenta) is already at the top of the brightness (it can not go above 100%), change it to a less bright one.

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