如何在样式组件中使用“悬停”（CSS）动作？答案

【问题标题】：How to use "hover"(CSS) action in Styled-components?如何在样式组件中使用“悬停”（CSS）动作？
【发布时间】：2021-07-03 08:07:05
【问题描述】：

我在我的 React.js 应用程序中使用了 Styled-components。我想在鼠标悬停动作上使一些区域模糊。所以我尝试使用&:hover，除了背景效果之外，所有线条在&:hover 区域都可以正常工作。

如何在样式组件中制作模糊效果（鼠标悬停）？

我的代码

const Adiv = styled.div`
  width: 300px;
  height: 60px;
  background: #ffa5;
  &:hover {
    backdrop-filter: blur(2px);          // This line doesn't work
    -webkit-backdrop-filter: blur(2px);  // This line doesn't work
    cursor: pointer;
    border: 1px solid red;
  }
`

但是当我尝试使用普通的 HTML（例如 w3schools.com/"Try it yourself"）时，效果很好。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #aaa {
          width: 300px; 
          height: 60px; 
          position: absolute; 
          top: 150px; 
          left: 50px;
      }
      #aaa:hover {
          cursor: pointer;
          backdrop-filter: blur(5px);
          border: 1px solid red;
      }
    </style>
  </head>
  <body>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <div id="aaa">bbbbbbb</div>
  </body>
</html>

已编辑

我想得到像上图这样的效果。我不希望 div 内的文本模糊。 filter 为 div 中的文本本身提供模糊效果。我只想在鼠标悬停时对 div 后面的字母进行模糊处理。所以我想用backdrop-filter。

仅当我使用样式组件时，它才不起作用。我仍然很好奇为什么。我的代码有什么问题？

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

似乎 css 实体 backdrop-filter 和 -webkit.backdrop-filter 不是您在图片中描述的。

背景过滤器适用于目标节点后面的元素，而过滤器适用于节点本身。为了看起来像您添加的图像，样式组件将是：

const Adiv = styled.div`
  width: 300px;
  height: 60px;
  background: #ffa5;
  &:hover {
    webkit-filter: blur(2px);
    filter: blur(2px);
    cursor: pointer;
    border: 1px solid red;
  }
`

结果如下所示。

【讨论】：

我更新了帖子上的屏幕图像。我不希望 div 内的文本模糊。 filter 为 div 中的文本本身提供模糊效果。我只想给 div 后面的字母加上模糊效果。