Question

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

我在容器css中添加了box-shadow，但似乎仅应用于其子级。有没有办法只遮住卡容器而不遮盖其子容器？例如，将鼠标悬停在两个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);
}

More complete CodeSnippet

Answer 1

您需要删除：hover .card-container:hover的空间

Answer 2

您的选择器有误

.card-container :hover
               ^

.card-container和:hover之间的空格表示样式将应用于.card-container

内的元素

删除空格将给出

.card-container:hover

将鼠标悬停在.card-container上将应用样式

.App {
  font-family: sans-serif;
  text-align: center;
}

.card-title {
  font: 20px arial, sans-serif;
  text-align: left;
  padding: 0px 5px 5px 5px;
}

.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);
}

.card-body {
  text-align: left;
  padding: 10px 16px;
}

<div class="App">
  <div class="card-container">
    <div class="card-title">card title</div>
    <div class="card-children">
      <form class="nameform"><label>Name: &nbsp;<input type="text">&nbsp;</label><input type="submit" disabled="" value="Submit">
        <div class="input-check">
          <div style="color: red;">Has at least eight characters</div>
        </div>
      </form>
    </div>
    <div class="card-body">
      <p> text line one </p>
      <p> text line two </p>
    </div>
  </div>
</div>

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

2 个答案: