发现它很难白出一个部分，并提出一个按钮

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组的建议，其中，I加入此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格。

样品1

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

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

样品2

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

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

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/