如何使用CSS无法点击某个区域？

Question

假设我有包含某些链接和图像的包装div,有没有什么方法可以一次性使用CSS来停用它？

---

在回答了答案后:
我放弃了只能用CSS制作它的想法.jQuery blockUI插件就像魅力一样.

Answer 1

有一个CSS规则,但由于旧的浏览器支持,它没有被广泛使用

pointer-events: none;

Answer 2

这些天你可以在内容上放置一个伪元素.

.blocked
{
    position:relative;
}
.blocked:after
{
    content: '';
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:1;
    background: transparent;
}

http://jsfiddle.net/HE5wR/27/

Answer 3

我认为这个也有效：

CSS

pointer-events: none;

Answer 4

如果你打算使用jQuery,你可以使用blockUI插件轻松完成....或者用CSS回答你的问题,你必须绝对将div放在你想要阻止的内容上.只需确保绝对定位的div位于要阻止z-indexing目的的内容之后.

<div style="position:relative;width: 200px;height: 200px;background-color:green">
    <div>
        <a href="#">Content to be blocked.</a>
    </div>
    <div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>

抱歉所有的内联css.你必须做一些好的课程.此外,这只在firefox和IE7中测试过.

Answer 5

用另一个不可点击的元素覆盖它。您可能需要使用 JavaScript 来打开和关闭此“封面”。你可以做一些聪明的事情，比如让它变成半透明或其他东西。

<style>
    #cover {position:absolute;background-color:#000;opacity:0.4;}
</style>

<div id="clickable-stuff">
   ...
</div>
<div id="cover">
</div>

<script type="text/javascript">
    function coverUp() {
        var cover = document.getElementById('cover');
        var areaToCover = document.getElementById('clickable-stuff');
        cover.style.display = 'block';
        cover.style.width = //get areaToCover's width
        cover.style.height = //get areaToCover's height
        cover.style.left = //get areaToCover's absolute left position
        cover.style.top = //get areaToCover's absolute top position
    }

    /*
       Check out jQuery or another library which makes
       it quick and easy to get things like absolute position
       of an element
    */
</script>