Question

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

Answer 1

像这样改变.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/

Answer 2

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

覆盖css无法正常工作

2 个答案: