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:
-webkit-filter: invert(40%);
)pointer-events: none;
)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;
}
EDIT:
Set the wrapping div
s 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