Trying to animate 2 parts of svg based on hover on whole svg-CodePudding

I'm trying to animate the Facebook SVG icon when on hover but I can only animate separate parts of the image. Although I need to animate the whole image on hover. Here's the SVG code:

<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="fb-outer">
        <rect id="fb-rect" x="1" y="0.5" width="39" height="39" stroke="white" />
        <g id="fb-inner">
            <path id="fb-path"
                d="M22.2456 21.7899V31H18.0148V21.7899H14.5V18.0555H18.0148V16.6967C18.0148 11.6524 20.122 9 24.5806 9C25.9475 9 26.2892 9.21967 27.0377 9.39867V13.0925C26.1997 12.946 25.9638 12.8646 25.0932 12.8646C24.0599 12.8646 23.5067 13.1575 23.0022 13.7352C22.4978 14.3129 22.2456 15.3136 22.2456 16.7456V18.0636H27.0377L25.7522 21.7981H22.2456V21.7899Z"
                fill="white" />
        </g>
    </g>
</svg>

Here's the CSS code:

#fb-rect:hover {
    fill: white;
}

#fb-path:hover {
    stroke: black;
    fill: black;
}

Here's the codepen. I also have the gif demonstrating what I want to achieve:

CodePudding user response：

Try this code

#fb-outer:hover #fb-rect {
  fill: white;
}

#fb-outer:hover #fb-path {
  stroke: black;
  fill: black;
}

u can also add the position absolute: <div style="background-color: red; position: absolute;">