How do I make an area unclickable with CSS?

Let's say if I have wrapper div which includes some links and images, is there any way I can deactivate it at once with CSS only?

After review of answers:
I dropped the idea that can make it with CSS only. jQuery blockUI plug in works like charm.

There is a CSS rule for that, but it's not widely used because of old browsers support

pointer-events: none;

These days you can just position a pseudo-element over the content.

.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/

I think this one works too:

CSS

pointer-events: none;

if you are going to use jQuery, you can easily accomplish this with the blockUI plugin. ...or to answer your question with CSS, you'll have to absolutely position the div over the content you wish to block. just make sure the absolutely positioned div comes after the content to be blocked for z-indexing purposes.

<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>

sorry for all the inline css. you'll have to make some nice classes. Also, this has only been tested in firefox and IE7.