我想在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);
}
您需要删除:hover .card-container:hover
的空间,请尝试此
您的选择器有误
.card-container :hover
^
.card-container
和:hover
之间的空格表示样式将应用于元素inside .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: <input type="text"> </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>