Question

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

我有一个卡片式元素，包括一个全角形式的单选按钮。当按钮为:selected时，我会在按钮的父div中添加一个类来更改它background-color。由于父div为全宽，因此重新绘制会移除卡片上box-shadow触及边缘的div。

我似乎无法找到解决方案，也许你可以提供帮助。

这是我的代码。如何确保background-color中的更改不会影响box-shadow效果？或者，这只是一个问题，我需要在我的box-shadow课程中添加某种自定义.selected吗？

＆＃13;

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

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

更改子项的背景颜色会删除父项上的box-shadow

1 个答案: