发现很难将部分变白并显示按钮

Question

我的功能部分中有一堆元素 - 我希望此部分变为白色并在计时器达到零时显示一个按钮，说“下一个问题”。我已经完成了javascript（所以当计时器到达零时，将调用一些函数来改变css样式）并且它工作正常。

问题是，我无法弄清楚在css方面要修改或做什么来实际达到我想要的效果。我遇到麻烦的事情是除了“下一个问题”按钮之外的部分。这就是它现在的样子：  

我想将整个部分变为白色的文本，计时器，以及开始和跳过按钮。

HTML：

<section class="features">

        <p class = 'new-question'> The text displaying MMI questions will go here. </p>

        <div class = 'middle-center'>
        <h2>Completed</h2>
        <button type='button' class='nbtn nbtn-1 nbtn-1a btn-next-question'>Next Question</button>
        </div>

        <div class = 'bottom-right'>
        <button type='button' class='nbtn nbtn-1 nbtn-1a btn-start'>Start</button>
        <button type='button' class='nbtn nbtn-1 nbtn-1a btn-skip'>Skip</button>
        </div>

        <div class = 'bottom-left timer-style'>
        <span id ='countdown-2-minutes'>2:00</span>
        <span id ='countdown-8-minutes'>8:00</span>    
        </div>


</section>

的CSS：

.features {
position: relative;
margin-top: 10px;
min-height: 400px;
border: 1px solid #C4C4C4;
border-radius: 2px;
color: #BA8960;
overflow: hidden;
background-color: #F5F5F5;
}

.new-question {
    font-family:Roboto;
    font-size: 23px;
    margin: 20px 20px;
}

/* buttons */
.timer-style{
text-transform: uppercase;
letter-spacing: 1px;
font-size: 20px;
margin: 15px 10px;
span{
margin: 0px 20px;

}

.bottom-right{
position: absolute;
bottom: 0;
right: 0;

}
.bottom-left{
position: absolute;
bottom: 0;
left: 0;
}

.middle-center{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

}

Answer 1

以下是2条建议，我将此CSS规则添加到第一个样本（使用不透明度）

.features.white-it > *:not(.middle-center) {
  opacity: 0.2;
}

这是第二个样本（使用伪）

.features.white-it:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 2;
}
.features.white-it > *:not(.middle-center) {
  z-index: 1;
}
.features.white-it .middle-center {
  z-index: 3;
}

现在，使用您的脚本，只需将类white-it添加到.feature div。

样本1

＆＃13;

＆＃13;

.features {
  position: relative;
  margin-top: 10px;
  min-height: 400px;
  border: 1px solid #C4C4C4;
  border-radius: 2px;
  color: #BA8960;
  overflow: hidden;
  background-color: #F5F5F5;
}

.new-question {
  font-family:Roboto;
  font-size: 23px;
  margin: 20px 20px;
}

/* buttons */
.timer-style{
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 20px;
  margin: 15px 10px;
}
span{
  margin: 0px 20px;

}
.bottom-right{
  position: absolute;
  bottom: 0;
  right: 0;

}
.bottom-left{
  position: absolute;
  bottom: 0;
  left: 0;
}
.middle-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.features.white-it > *:not(.middle-center) {
  opacity: 0.2;
}

＆＃13;

<section class="features white-it">

        <p class = 'new-question'> The text displaying MMI questions will go here. </p>

        <div class = 'middle-center'>
        <h2>Completed</h2>
        <button type='button' class='nbtn nbtn-1 nbtn-1a btn-next-question'>Next Question</button>
        </div>

        <div class = 'bottom-right'>
        <button type='button' class='nbtn nbtn-1 nbtn-1a btn-start'>Start</button>
        <button type='button' class='nbtn nbtn-1 nbtn-1a btn-skip'>Skip</button>
        </div>

        <div class = 'bottom-left timer-style'>
        <span id ='countdown-2-minutes'>2:00</span>
        <span id ='countdown-8-minutes'>8:00</span>    
        </div>


</section>

＆＃13;

＆＃13;

＆＃13;

样本2

＆＃13;

＆＃13;

.features {
  position: relative;
  margin-top: 10px;
  min-height: 400px;
  border: 1px solid #C4C4C4;
  border-radius: 2px;
  color: #BA8960;
  overflow: hidden;
  background-color: #F5F5F5;
}

.new-question {
  font-family:Roboto;
  font-size: 23px;
  margin: 20px 20px;
}

/* buttons */
.timer-style{
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 20px;
  margin: 15px 10px;
}
span{
  margin: 0px 20px;

}
.bottom-right{
  position: absolute;
  bottom: 0;
  right: 0;

}
.bottom-left{
  position: absolute;
  bottom: 0;
  left: 0;
}
.middle-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.features.white-it:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 2;
}
.features.white-it > *:not(.middle-center) {
  z-index: 1;
}
.features.white-it .middle-center {
  z-index: 3;
}

＆＃13;

<section class="features white-it">

        <p class = 'new-question'> The text displaying MMI questions will go here. </p>

        <div class = 'middle-center'>
        <h2>Completed</h2>
        <button type='button' class='nbtn nbtn-1 nbtn-1a btn-next-question'>Next Question</button>
        </div>

        <div class = 'bottom-right'>
        <button type='button' class='nbtn nbtn-1 nbtn-1a btn-start'>Start</button>
        <button type='button' class='nbtn nbtn-1 nbtn-1a btn-skip'>Skip</button>
        </div>

        <div class = 'bottom-left timer-style'>
        <span id ='countdown-2-minutes'>2:00</span>
        <span id ='countdown-8-minutes'>8:00</span>    
        </div>


</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<div class="mask"></div>    
<section class="features">

    <p class = 'new-question'> The text displaying MMI questions will go here. </p>

    <div class = 'middle-center'>
    <h2>Completed</h2>
    <button type='button' class='nbtn nbtn-1 nbtn-1a btn-next-question'>Next Question</button>
    </div>

    <div class = 'bottom-right'>
    <button type='button' class='nbtn nbtn-1 nbtn-1a btn-start'>Start</button>
    <button type='button' class='nbtn nbtn-1 nbtn-1a btn-skip'>Skip</button>
    </div>

    <div class = 'bottom-left timer-style'>
    <span id ='countdown-2-minutes'>2:00</span>
    <span id ='countdown-8-minutes'>8:00</span>    
    </div>
</section>

.mask {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
}

body, html {
  height: 100%;
}

.middle center {
  z-index: 10;
}

你需要剩余的css（其中包含一个缺失的括号）以及这个。隐藏并显示计时器上的.mask。

https://jsfiddle.net/ne9xeppf/