时间戳

首页 > 解决方案 > 仅将“悬停”框阴影应用于容器

css - 仅将“悬停”框阴影应用于容器

问题描述

我想Card在 React 和 CSS 中创建一个已经有阴影的组件，但是在悬停时它会变得阴影。

我添加box-shadow到容器 css 但它似乎只适用于它的孩子。有没有办法只影响卡片容器而不影响它的孩子？例如，在悬停时，两个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);
}

更完整的代码片段

标签： cssreactjs

解决方案

你需要删除 :hover 的空间.card-container:hover试试这个

推荐阅读