モーダルメッセージを表示しない

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

この場合のように擬似クラスを使用すると、擬似クラス（この場合はscopri）を持つ要素の直接的または間接的な兄弟である必要があります。これは、CSSの子/兄弟セレクタがかなり限定的であるためです。

あなたはこのようにそれを使用することができます。これはどのようなCSS preprocesser

<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 div内にネストされているため、.scopriと.modalitaは兄弟ではありません。

あなたがそうのような.boxのdiv、外.scopriボタンを移動した場合：

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

次に、あなたのコードが再び意図したとおりに動作するはずですが。