不顯示模式消息

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> 

然後再次如預期的代碼應該工作。