更改子项的背景颜色会删除父项上的框阴影

Question

我正在阅读 MDN 文档和一些文章，例如 this one 和 question after question after question 等等，但我似乎无法找到解决我的特定问题的方法。

我有一个卡片类型的元素，其中包括全角形式的单选按钮。当按钮为:selected 时，我将一个类添加到按钮的父div 以将其更改为background-color。由于父 div 是全角的，因此重绘会删除卡片上特定 div 接触边缘的 box-shadow。

我似乎找不到解决方案，也许你可以帮忙。

这是我的代码。如何确保background-color 的更改不会破坏我的box-shadow 效果？或者，这只是油漆的问题，我需要在我的 .selected 类中添加某种自定义 box-shadow 吗？

$('.ClubSelect').click(function() {
    $(this).find('input[type=radio]')[0].click();
    $('.ClubSelect').removeClass('selected');
    $(this).addClass('selected');
});

* {
    box-sizing: border-box;
}

html {
    background-color: #fff;
    color: #422618;
    font-family: adobe-caslon-pro, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

div#SelectAClubLevel {
  width: 100%;
  padding: 10px;
}

.select-card {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    max-width: 580px;
    margin-bottom: 5px;
    z-index: 10;
    position: relative;
}

.ClubSelect {
    cursor: pointer;
    width: 100%;
    margin-bottom: 2px;
    background-color: #f5ddbc;
    height: 59px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

.selected {
    background-color: #d49948;
    position: relative;
    z-index: 10;
}

.ClubSelect input,
.ClubLevelTitle,
.ClubLevelAmt {
    display: inline-block;
    vertical-align: middle;
    color: #422618;
}

.ClubLevelTitle {
    font-family: freight-sans-pro, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
    font-size: 2rem;
}

.ClubSelect input {
    margin: 12px 5px 12px 20px;
    width: 1.4rem;
    height: 1.4rem;
}

.ClubLevelAmt {
    font-family: freight-sans-pro, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
    font-size: 2rem;
    width: 130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="SelectAClubLevel">
    <h3>Please select a Monthly Giving Level</h3>
    <div class="select-card">
    
        <div id="club-84" class="ClubSelect LowerClub">
            <input ID="CLUB_LEVEL_1000" type="radio" value="84.00" name="clubselect" onclick="handleClick(this)" />
            <div class="ClubLevelAmt"><span>$84</span>/month</div>
            <div class="ClubLevelTitle">1000&nbsp;Club</div>
        </div>
        
        <div id="club-209" class="ClubSelect LowerClub">
            <input ID="CLUB_LEVEL_2500" type='radio' value="209.00" name="clubselect" onclick="handleClick(this)" />
            <div class="ClubLevelAmt"><span>$209</span>/month</div>
            <div class="ClubLevelTitle">2500&nbsp;Club</div>
        </div>
        
        <div id="club-417" class="ClubSelect LowerClub">
            <input ID="CLUB_LEVEL_FOUNDERS" type='radio' value="417.00" name="clubselect" onclick="handleClick(this)" />
            <div class="ClubLevelAmt"><span>$417</span>/month</div>
            <div class="ClubLevelTitle">Founder's Club</div>
        </div>

        <div id="club-834" class="ClubSelect UpperClub">
            <input ID="CLUB_LEVEL_CHAIRMANS" type='radio' value="834.00" name="clubselect" onclick="handleClick(this)" />
            <div class="ClubLevelAmt"><span>$834</span>/month</div>
            <div class="ClubLevelTitle">Chairman's Circle</div>
        </div>
    </div>
</div>

Answer 1

我认为这只是一种绘画效果，因为它不会破坏你的盒子阴影