<分区>
<分区>
我想在 React 和 CSS 中创建一个已经有阴影的 Card 组件，但在悬停时它会变成阴影。
我将 box-shadow 添加到容器 css，但它似乎只应用于它的子项。
有没有办法只隐藏卡片容器而不是它的 child ？
例如，在悬停时，两个 p 元素有自己的阴影，这是我不想要的。
这是卡片渲染函数中的卡片结构
<div className={"card-container"}>
<div className="card-title">{this.state.title}</div>
<div className="card-children">{this.state.children}</div>
<div className="card-body">
<p> text line one </p>
<p> text line two </p>
</div>
</div>
这是卡片的CSS
.card-container {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Card look */
transition: 0.3s;
background-color: white;
border-radius: 4px; /* Round corners */
border-left: 5px solid #5f37ff; /* Blue left border */
}
.card-container:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
最佳答案
你需要删除 :hover .card-container:hover 的空间试试这个
关于css - 仅将 "hover"box-shadow 应用于容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58727013/