伪类:active作用于按钮时影响其他布局元素的问题排查

以下是几个最可能导致该问题的原因：

• CSS选择器范围过宽：你可能写了*:active或者.parent-container:active这类宽泛的选择器，导致按钮点击时，父元素的:active状态被触发，连带Phone图片、white-banner等子元素也继承了动画效果。检查你的:active规则，确保只精准定位按钮元素，比如用.portfolio-btn:active这类针对性选择器。
• 元素触发区域重叠：按钮的点击热区（可能因padding设置过大、元素定位错误等）覆盖了Phone图片或white-banner的区域。点击按钮时，实际也触发了这些元素的:active状态。可以用浏览器开发者工具的「元素选择器」查看每个元素的盒模型，确认按钮的点击范围是否超出预期。
• 动画属性的继承性：如果你的动画用到了transform、filter这类具有继承性的CSS属性，而Phone图片、white-banner没有显式重置这些属性，当按钮所在父元素触发:active时，子元素会继承动画效果。这种情况要给受影响的元素添加transform: none或对应的重置属性。
• JS事件绑定错误（若涉及JS）：如果搭配了JavaScript绑定点击事件，可能误将动画触发逻辑绑定到了多个元素上，检查JS代码里的事件监听目标是否仅针对按钮。

另外你提到添加额外外边距导致按钮阴影异常，大概率是因为修改的外边距破坏了按钮原本的盒模型——比如按钮的box-shadow是基于元素自身布局上下文计算的，margin调整后改变了元素的布局位置，进而导致阴影显示错位。

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