CSS transition仅作用于最后一个SVG元素的问题排查与解决

嘿，我来帮你捋清楚为啥只有最后一个图标能触发hover效果，以及怎么修复这个问题：

核心问题有两个： #

• SVG颜色控制属性不统一：你前两个Instagram和GitHub的SVG图标，是靠stroke="#fff"来实现白色显示的，而且它们的fill属性默认是none；但第三个LinkedIn图标是用fill="#fff"来设置颜色的。你的CSS只修改了fill属性，所以前两个图标根本不会有颜色变化，只有第三个能响应hover。
• Transition的位置错误：你把transition写在了:hover状态下，这意味着只有鼠标移上去的时候会有过渡效果，移开的时候会瞬间变回白色，体验很生硬，完全达不到你想要的平滑过渡预期。

修改后的CSS代码： #

/* 给所有社交图标下的path设置默认过渡，确保移入移出都有平滑效果 */
.socials path {
  transition: all 0.5s ease;
}

/* hover时同时修改fill和stroke的颜色，覆盖所有图标的白色 */
.socials:hover path {
  fill: #FF4141;
  stroke: #FF4141;
}

/* 可选：保持前两个描边图标的原有样式，避免填充整个图标 */
.socials:nth-child(1) path,
.socials:nth-child(2) path {
  fill: none;
}

为什么这样改？ #

1. 统一颜色修改：同时设置fill和stroke为红色，不管图标是用fill还是stroke来控制颜色，都能被覆盖，三个图标hover时就都会变红了。
2. 正确的过渡设置：把transition加到常态的.socials path上，这样颜色变化的过渡效果在鼠标移入和移出时都会生效，完全符合你想要的平滑体验。
3. 保持图标样式一致性：可选的nth-child设置是为了让前两个描边图标hover时依然保持描边效果，不会被填充成实心红色，和它们原本的设计风格一致。

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