オーバーレイのためにボタンをクリックできませんか？

Question

これはこれは私が、私はボタン、オーバーレイフォームをクリックしたときので、私はボタンをクリックすることができない理由があると思いCSS

.navs:after { 
    content: ""; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: #0d0d0d; 
    opacity: 0.5; 
    transform: scaleY(0); 
    transform-origin: 0 100%; 
    transition: all .2s ease-out; 
} 
.navs:hover:after{ 
    transform: scaleY(1); 
} 
.navs:active:after{ 
    background: #FFFFFF; 
} 

あるHTML

<li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li> 

です。私はオーバーレイを削除したくない。オーバーレイをクリックする方法はありますか？

Answer 1

オプション1

あなたのマウスz-index以上を与えることができます。あなたはそれを

オプション2

をクリックすることができますので、これは、あなたはとてもクリックイベントが「フォールスルー」しますpointer-events:none;を使用して、オーバーレイ上のすべてのマウスイベントを無効にすることができ、オーバーレイの上にあなたのボタンを移動しますボタンはそれを登録します

編集：可能であればポインタイベントを使用して、z-indexをバックアップ計画にします。あなたがそれに落ちるなら、あなたはそれをインラインで使用するのではなく、あなたのCSSにそれのための特定のセレクタを書くことをお勧めします。

Answer 2

利用スパンの代わりに、前と後、

<a href="my link"><img class="" src="my_image" alt=""> 
<span class="rig-overlay"></span> 
<span class="rig-text"> 
<span>name</span> 
<span>function</span> 
</span> 
</a> 

ような何かスパンクリック可能な領域を覆うません