CSS Question

How to disable all mouse events except click?

I want to disable all mouse events except click, I have this:

.info {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
pointer-events: none;
background-color: rgba(26, 188, 156, 0.9);

but pointer-events: none; disables all events.

Answer Source

The pointer-events attribute only has three properties:

  • none,
  • auto,
  • inherit

So if you attach

    pointer-events: none;

to an element all events will be disabled.

    pointer-events: auto;

however restores all default functionality and is good for if an element's parent has pointer-events: none.

A workaround that I think you'd find useful (aside from some JavaScript manipulation), is to wrap your objects in a parent container and add

    pointer-events: none;

to that parent container and use:

    pointer-events: auto;

on .info and add .info to the child elements of the container.

It won't accomplish exactly what you're looking for but it will replicate that click only illusion.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download