如何在样式组件中使用“悬停”(CSS) 操作？
Sat*_*ill 4 reactjs styled-components
我在 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/“亲自尝试”）时，效果很好。
<!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.
仅当我使用样式组件时，它才不起作用。我还是很好奇为什么。我的代码有什么问题吗？
它看起来像 css 实体backdrop-filter，而-webkit.backdrop-filter不是您在图像中描述的内容。
Backdrop-filter适用于目标节点后面的元素，而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;
}
`
结果看起来像这样。
| 归档时间： |
|
| 查看次数： |
3720 次 |
| 最近记录： |