How to Make an Area Unclickable With CSS

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.

Make element unclickable (click things behind it)

Setting CSS - pointer-events: none should remove any mouse interaction with the image. Supported pretty well in all but IE.

Here's a full list of values pointer-events can take.

How can I make buttons unclickable until CSS transition is finished?

I figured it out; I simply needed to add a delay when changing the visibility, using a CSS transition (with the same duration as the actual transition effect).

.portfolio-item--eff1:hover .portfolio-item__links {
  visibility: visible;
  transition: visibility 0ms 0.3s;
}
.portfolio-item__links{
  visibility: hidden;
}

css button set to unclickable

I hope this is working (disabled class added successfully):-

$(".good-form > .actions a, .theButton").addClass('disabled');
// IF NOT THEN USE $(".theButton").addClass('disabled');

Now add CSS like below:-

.disabled{
  pointer-events: none;
}

This will also work (without additional CSS) :-

$(".good-form > .actions a, .theButton").prop('disabled',true); 
// or $(".theButton").prop('disabled',true);

Can I make an element's padding (or border) unclickable?

I'm afraid this is not possible without adding extra markup. If you were using divs you could add a pseudo-element that contains the background image, but unfortunately it is not possible on input elements (:before and :after).

You need to add a wrapper div that handles the background image:
http://jsfiddle.net/sQGV9/

Also, beware of the usability issues this may cause, a hover effect usually implies that the element is clickable, so in the jsfiddle I added a cursor: pointer so it is clear the precise area where you are supposed to click.

If you attach an image with the halo effect you want to achieve it may be possible to achieve the effect in css3, removing the need for extra markup.

Make parent div unclickable but children children clickable - CSS

I've found a easy way to get around this problem (op).

pointer-events:none; makes it so the mouse won't interact with the element. By default, pointer-events is inherited, so just set the children as pointer-events:auto;.

function bgclick() {  console.log('Background Is Clicked!');}
function topclick() {  console.log('Top Is Clicked!');}

#background {  background-color: #f33;  width: 250px;  height: 250px;  position: fixed;  top: 0;  left: 0;  z-index: -1;}
#top {  width: 250px;  height: 250px;  position: fixed;  top: 0;  left: 0;  pointer-events: none;}
.children {  width: 50px;  height: 50px;  position: relative;  pointer-events: auto;}

<div id="background" onclick="bgclick()"></div><div id="top">  <div class="children" onclick="topclick()" style="background-color:#3f3"></div>  <div class="children" onclick="topclick()" style="background-color:#33f"></div></div>