How do I make an area unclickable with CSS?

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.

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

pointer-events: none;

I think this one works too:

CSS

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/