CODEWITHSUNDEEP
javascriptjquerycss
jmoon
jmoon

Reputation: 435

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.

Upvotes: 43

Views: 93732

Answers (7)

Dmitri
Dmitri

Reputation: 3561

There is a CSS rule for that:

pointer-events: none;

Check browser support: https://caniuse.com/pointer-events

Upvotes: 192

lsl
lsl

Reputation: 4409

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:

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.

Upvotes: -4

Adrian Tocu
Adrian Tocu

Reputation: 189

I think this one works too:

CSS

pointer-events: none;

Upvotes: 11

towr
towr

Reputation: 4157

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/

Upvotes: 12

Simone Poggi
Simone Poggi

Reputation: 1468

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!

Upvotes: 1

erikphipps
erikphipps

Reputation: 112

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.

Upvotes: 8

Rex M
Rex M

Reputation: 144192

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>

Upvotes: 5

Related Questions