Styled Components：仅直接子元素Hover时移除模糊，父元素Hover不生效

原代码（修正语法错误后） #

const element1 = styled.div`
 background-color: red;
 height: 200px;
`

const element2= styled.img`
  filter: blur(2px);
`

<element1>
  <element2 />
</element1>

需求 #

• 当element2未嵌套时，保持模糊效果；
• 当element2直接嵌套在element1下时，仅hover element2自身时移除模糊，hover父元素element1时模糊不消失；
• 若element2嵌套在element1下的span中（非直接子元素），hover时仍保持模糊。

可以仅通过CSS实现，核心靠CSS选择器的组合规则精准匹配不同嵌套场景：

1. 默认模糊样式：先给element2设置全局默认模糊，直接满足未嵌套时的需求，这部分写在element2的Styled Components样式里即可。

2. 直接子元素的hover规则：在element1的样式中，用直接子选择器>匹配仅作为自己直接子元素的element2，再给这个element2的自身hover状态加移除模糊的规则。这样只有当element2是element1的直接子元素，且用户鼠标hover到element2本身时，才会取消模糊；hover父元素element1时，不会触发这个规则，模糊保留。
   写法示例：

   const element1 = styled.div`
    background-color: red;
    height: 200px;
   
    & > ${element2}:hover {
      filter: none;
    }
   `
   

3. 非直接子元素的自动兼容：因为我们只给「element1直接子元素的element2」加了hover移除模糊的规则，非直接嵌套的element2不会命中这个选择器，所以hover时自然保持模糊，无需额外写规则。

另外要注意：原代码里的style是笔误，Styled Components正确写法是styled；CSS的blur函数必须加括号（比如blur(2px)），属性结尾要加分号，否则语法无效。

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