如何实现Facebook SVG图标整体hover时多元素联动动画？

你当前的问题是CSS hover事件绑定在了单个元素上，导致只有鼠标悬停在对应元素（rect或path）上时才触发动画，要实现鼠标悬停整个SVG区域时，内部所有元素同步变化，只需要把hover绑定到外层容器（比如SVG或者#fb-outer这个g元素），再通过后代选择器控制内部元素的样式即可。

修改后的代码 #

CSS代码 #

/* 当hover整个SVG时，同步修改内部元素样式 */
svg:hover #fb-rect {
  fill: white;
}

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

HTML代码（无需修改结构，保持原结构即可） #

<div style="background-color: red">
  <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>
</div>

原理说明 #

• 把hover事件绑定到svg元素（或者你也可以用外层的#fb-outer这个g元素，效果一样），这样只要鼠标进入整个SVG的区域，就会触发hover状态。
• 通过svg:hover #fb-rect、svg:hover #fb-path这样的后代选择器，当SVG处于hover状态时，同时修改内部rect和path的样式，实现同步动画效果。

原效果演示：

内容的提问来源于stack exchange，提问作者in43sh