コンテンツブロックオーバーレイのフェードイン/クリック時

Question

一部のJSコードで生成されたブロックをカバーするために、オーバーレイのフェードインとフェードアウトに問題があります。

以下は、作品へのリンクです。いずれかの大陸をクリックすると、国旗のあるブロックが生成されます。また、「一部のコンテンツ」と表示されている灰色のバーも表示されます。理想的には、フラグの1つをクリックするまで、そのバーを非表示にします。どちらの時点で、オーバーレイがフラグの上にスライドします。ブロックの外側のどこかをクリックすると、オーバーレイが外に出て消えます。

CodePen link.

私が設定してみました：

&__block-overlay { 
    .... 
    opacity: 0; 
    .... 
} 

と

&__block-overlay:active { 
    opacity: 0.7; 
} 

をしかし、それは動作しませんでした。

どのような提案も大変ありがとうございます。

Answer 1

ここで解決する2つの問題があります。 1つは「一部のコンテンツ」バーを隠すことです。

&__block { 
    display: inline-block; 
    width: 25%; 
    margin: 0.5%; 
    height: 150px; 
    text-align: center; 
    position: relative; 
    cursor: pointer; 
    border-radius: 5px; 
    overflow: hidden; /* add this */ 

その後、代わりにaddClass()のtoggleClass()を使用し、連続したクリックの上、コンテンツの表示を切り替えるために：あなたは、彼らが旗の上に場合にのみ表示されるように、彼らの親にoverflow: hiddenを設定することにより、それを達成することができます

blockClicked(e) { 
    const $block = $(e.target.closest('.js-block')); 
    $('.details-open').removeClass('details-open'); 
    $block.toggleClass('details-open'); 
}, 

Updated CodePen