不显示模式消息

Question

我试图显示一个模式消息，当用户单击使用只有CSS的按钮。当我尝试将此按钮添加到分区时，该按钮不再有效。为什么？

$colore = #2767ce 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    float: center; 
 
} 
 

 
.box { 
 
    width: 220px; 
 
    float: center; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    border: 3px solid $colore; 
 
    padding: 10px; 
 
} 
 

 
.box p { 
 
    font-family: sans-serif; 
 
    font-size: 15px; 
 
    margin-bottom: 40px; 
 
    margin-top: 40px; 
 
} 
 
    
 
.scopri { 
 
    display: block; 
 
    padding: 1em 2em; 
 
    background: $colore; 
 
    color: #fff; 
 
    border: 3px solid $colore; 
 
    outline: 0; 
 
    float: center; 
 
    margin: 0 auto; 
 
    text-transform: uppercase; 
 
    cursor: pointer; 
 
    transition: .6s ease; 
 
    -webkit-appearance: none; 
 
    
 
    &:hover { 
 
    background: white; 
 
    color: $colore; 
 
    border: 3px solid $colore; 
 
    } 
 
    } 
 
    
 
.modalita { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0,0,0,0.7); 
 
    transition: .3s ease-in-out; 
 
    
 
    &_box { 
 
    padding: 1em; 
 
    background: white; 
 
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); 
 
    text-align: center; 
 
    transition: all .3s cubic-bezier(.20,.90,.30,1.5); 
 
    transform: rotate(5deg) translate(-1em,1em); 
 
    border-top: 5px solid $colore; 
 
    border-bottom: 5px solid #ddd; 
 
    } 
 
} 
 
    
 
/* modal magic */ 
 
.scopri:focus + .modalita { 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
    
 
    .modalita_box { 
 
    transform: rotate(0deg) translate(0,0); 
 
    }

<div class="box"> 
 
    <h2>HUB</h2> 
 
    <p>test</p> 
 
<button class="scopri"> more </button> 
 
</div> 
 

 
<div class="modalita"> 
 
    <div class="modalita_box"> 
 
    <p> try </p> 
 
    </div> 
 
</div>

PS：如果你尝试删除它的工作分工，但我不知道为什么！

Answer 1

在这种情况下使用伪类，modalita需要是具有伪类（本例中为scopri）的元素的直接或间接兄弟。这是因为CSS孩子/兄弟姐妹选择器是相当严格的。

您可以使用它像这样：

<div class="box"> 
    <h2>HUB</h2> 
    <p>test</p> 
<button class="scopri"> more </button> 

<div class="modalita"> 
    <div class="modalita_box"> 
     <p> try </p> 
    </div> 
</div> 

</div> <!-- closing .box --> 

Answer 2

.scopri:focus + .modalita {中使用的+符号是Adjacent sibling selector，它只能应用于兄弟元素。

.scopri按钮嵌套在.box格内，所以.scopri和.modalita不是兄弟姐妹。

如果移动.scopri按钮.box股利外，像这样：

<div class="box"> 
    <h2>HUB</h2> 
    <p>test</p> 
</div> 
<button class="scopri"> more </button> 

然后再次如预期的代码应该工作。