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:

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

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/

Answer 3

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

pointer-events: none;

Answer 4

You should consider to apply the event.preventDefault function of jQuery. Here you can find an example:

http://api.jquery.com/event.preventDefault/

TL;DR-version:

$("#element-to-block").click( function(event) {
  event.preventDefault();
}

BAM!

Answer 5

If you mean unclickable so that the users can't copy and paste it or save the data somehow. No this has never really been possible.

You can use the jQuery BlockUI plugin or the CSS rule pointer-events: none; but that doesn't really prevent people from copying your text or images.

At worst I can always wget your content, and at best both css and js methods are easily circumvented using plugins like:

• "Allow right click" on firefox or chrome
• "Absolute enable right click and copy" on firefox or chrome
• "Don't fuck with paste" on firefox or chrome

Further to the point, unless you have a really good and legitimate excuse for breaking basic browser behavior, usability, accessibility, translation functionality, password managers, screenshot tools, container tools, or any number of various browser plugins functionality in the users right click context menu, please, just, stop, doing, this.

Answer 6

I think this one works too:

CSS

pointer-events: none;