javascript - オーバーレイCSSが機能しない

Question

ページの要素が無効になるようにオーバーレイを配置しています。私のページには2つの要素があります。1 つはanchorタグで、もう1 つはfile upload入力コントロールです。ファイル アップロード コントロールはデフォルトでは非表示で、アンカー タグをクリックするとトリガーされます。問題は、これらのコントロールにオーバーレイがありますが、非表示のファイル アップロード コントロールでは機能しないことです。オーバーレイ中にファイルのアップロード領域をクリックすると、トリガーされます。jsfiddle です。jsfiddle で PR テキストをクリックしてみてください。オーバーレイのために機能しないはずですが、クリック可能です。

これがhtmlコードです

<div class="ast">
<div class="notEdit-overlay"></div>
<a id="uploadQrCode" href="#" style="cursor:pointer;">Upload QR Code</a>
P<input id="qrCodeFileUpload" type="file" class="hideQRUpload" />R
</div>

Jクエリコード

    $('#uploadQrCode').click(function(){
    $('#qrCodeFileUpload').click();
});

そして、ここにcssがあります

    .hideQRUpload
{
    position:absolute;
    opacity:0;
    width:0px;
    height:0px;
}
.notEdit-overlay
{
    width: 1080px;
    height: 99%;
    left: 0px;
    background: red;
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
}
.ast{
    position: relative;
}