How do i make an area unclickable with CSS?

Question

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. Thanks a lot.

Answer 1

Cover it up with another un-clickable element. You may need to use JavaScript to toggle this "cover" on and off. You can do something clever like make it semi-transparent or something as well.

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

Answer 2

If you mean unclickable so that the users can't copy and paste it or save the data somehow. No this has never been possible. All those sites that make is sound/look like they have some way of blocking saving things don't really and what ever measures they put in place are easily worked around.

Answer 3

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.