Javascript – How to make an area unclickable with CSS

cssjavascriptjquery

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.

Best Solution

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.