0

我正在放置一个叠加层，以便我页面上的元素被禁用。在我的页面上有两个元素。一个是anchor标签，另一个是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>

jQuery代码

    $('#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;
}
4

2 回答 2

4

像这样更改 .notEdit-overlay 的 css

.notEdit-overlay
{
 width: 1080px;
 height: 99%;
 left: 0px;
 background: none;
 position: absolute;
 opacity: 0;
 filter: alpha(opacity=0);
 z-index: 1;
}

应该使用 z-index。

http://jsfiddle.net/T5E8D/3/

于 2013-09-19T09:09:27.893 回答
2

尝试pointer-events: none为您的上传字段添加 - http://jsfiddle.net/T5E8D/2/

于 2013-09-19T09:09:20.230 回答