kingardox kingardox - 4 months ago 14
jQuery Question

make :before not clickable in Firefox

I am working on an image uploader. I have a drag and drop field for the image using https://codecanyon.net/item/slim-image-upload-and-ratio-cropping-plugin/16364167?ref=pqina&ref=pqina&clickthrough_id=749572872&redirect_back=true . But I want the dropzone to have an image as an overlay of the dropzone. I managed to do this with a :before element. It works as intended in Chrome and even in Edge. But in Firefox I can't click the dropzone behind the :before Element. Is there any way to fix that?

Very simplified example here:

Simplified :before:

.dropper:before {
content: " ";
width: 200px;
height: 300px;
background: #ff0000;
position: absolute;
top: 8px;
left: 8px;
opacity: .5;
-moz-opacity: 0.5;
}


https://jsfiddle.net/6kv6u9kv/

I want the "click me" to be clickable. I appreciate any quick help because this is for work. Thanks in advance!

Answer

SOLUTION:

You can use pointer-events: none; css property in your overlay.

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.


CODE SNIPPET:

.dropper {
  width: 200px;
  height: 200px;
  background: #aaa;
  padding-top: 100px;
}
.dropper:before {
  content: " ";
  width: 200px;
  height: 300px;
  background: #ff0000;
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: .5;
  -moz-opacity: 0.5;
  z-index: 100000;
  pointer-events: none;
}
<div class="dropper">
  <a href="#" id="click">
  click me
  </a>
</div>