How can I show that an image link is disabled by using both pointer-events and cursor properties?

Question

Fiddle

I have an image wrapped in an anchor that has a click action on it (a simple case is in the above fiddle).

At certain times, this action is not valid, so I would like to do 3 things:

1. grey the image out (-webkit-filter: invert(40%);)
2. disable the click event (pointer-events: none;)
3. change the cursor (cursor: not-allowed;)

Greying the image out always works, but it seems like the pointer-events and cursor properties don't play nicely together.

When applying both the pointer-events and cursor properties, I'd expect the action to be disabled AND the cursor to change - but it seems like the pointer-events property overrides my ability to set the cursor.

What's the correct way to do this?

Code:

No styles  <br>
<a href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
<hr>
pointer-events: none (good - I cannot click) <br>
<a class="grey no-click-1" href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
<hr>
cursor: not-allowed (good - I can click, but the cursor has changed) <br>
<a class="grey no-click-2" href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
<hr>
pointer-events: none AND cursor: not-allowed (bad - I can't click but the cursor has NOT changed)<br>
<a class="grey no-click-3" href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>


img {
    height: 80px;
}

.grey {
    -webkit-filter: invert(40%);    
}

.no-click-1 {
    pointer-events: none;
}

.no-click-2 {
    cursor: not-allowed;
}

.no-click-3 {
    pointer-events: none;
    cursor: not-allowed;
}

Answer 1

EDIT: Set the wrapping divs to display: inline-block;

http://jsfiddle.net/o8bjr3eL/4/

Wrap your element in a div with the cursor: not-allowed; and the child a has the pointer-events: none;

html:

<div class="not-allowed">
        <a class="no-click" href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
</div>

EDIT: css:

.not-allowed{
    cursor: not-allowed;

    display: inline-block; /* This is working */

}
.no-click {
    pointer-events: none;
    -webkit-filter: invert(40%);
}

That worked for me