I´m developing a little Chrome extension to allow user see what they are typing. It's a simple semi-transparent floating div element. The problem that I have is that html elements under it don't receive click events because the div element is over them (> z-index).
My question is:
Is any way to make my div "transparent" for click events (and other type of events)?
An image:
Try the CSS rule 'pointer-events'.
pointer-events: none;
Related
In only fire fox the cursor is not hidden when I change the cursor style "pointer" to "none" using java script over you tube Embeded video. I am using a extra div over Iframe to trigger the event to to hide the cursor. When I am inspect the element I see cursor property is none, but in just display its not hidden but work fine in chrome, edge.
This has to do with the document's height not being filled to 100%. As ridiculous as it may seem, some versions of Firefox require this to display certain CSS attributes properly.
See this thread for specifics. Let me know if that helps.
Can I remove hover from all the elements using CSS or Javascript? I want to remove it on mobile but to have it on desktop. I tried using pointer-events: none but it's removing all the events and I want the click event to remain.
Is there a way to remove only the hover property?
You can target all elements and their hover state using css:
*:hover {
}
Removing hover from mobile seems pointless since users cant really hover over elements. If they click on an element it kind of acts like a hover and having a special color for hover is therefore good, because user can see he actually cliked the element.
I've run into a really annoying problem with the stock Android 4.0 browser. I have a div with overflow: scroll, and elements within which scroll horizontally if they exceed the length of the div. The scrolling works fine, but for some reason (only in the Android browser), click/touch events attached to the elements within the div do not get triggered at all, unless you hold your finger on the element and let go EXACTLY at the point in which the highlighting disappears. Just wondering if anybody has encountered this problem and/or has any idea of how to fix it. Thanks.
So the bug seems to only occur when the element bound to a click/tap event within the scrolling container is an anchor (even without href attribute). If it's any other type of element, it works fine.
I am using a JPG overlay with a reduced opacity for an effect, however I want it as an effect only and make the content below that div clickable. Is that possible, thanks :)))
Thanks for your comments everyone. I guess I'll have to think of something else because the JPEG covers the whole page :)
Well there is pointer-events:none; but only few browsers modern browsers (and IE11) support it.
https://developer.mozilla.org/en/CSS/pointer-events
Yes, its possible
Use pointer-events: none along with conditional statements of CSS for IE11 (as it does not work in IE10 or below), you can get a cross browser compatible solution to achieve this.
Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks propagate through to elements lying bellow.
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11 conditional:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
Here is a basic example page with all the code.
No, it's not. The overlaying element will always intercept the click. One possible workaround is to bind a click event to the overlaying element, and then get the current mouse position & compare that to the position of the element underneath in order to determine whether or not that element should register a click. But chances are there is a much better way of accomplishing this. Without seeing your code, however, I have no way of knowing.
one simple trick i have found, althoug not very w3c, is to encapsulate the div into a span and use that span class to make the overlay.
That way the whole thing will be clickable , and the div will behave like a div
For example on a drag and drop scenario.. I would love to be able to use the onmouseover of the thing we are dragging to, but unfortunately, the design calls for a ghost (copy of what is being dragged) which will surround the area of the mouse pointer. So the cursor is moused over the ghost the whole time.
Are you able to use jQuery? If so, I would look into jQuery UI to handle both your drag and drop events. Since you can make a ghost copy of what you are dragging without disrupting where you drop it.
Visual feedback for drag allowing you to show a fake ghost copy.
- http://jqueryui.com/demos/draggable/#visual-feedback
Visual feedback for when you hover over the droppable area.
- http://jqueryui.com/demos/droppable/#visual-feedback
For Firefox 3.6+, Chrome and Safari, you can use pointer-events: none;
jsfiddle.net Example
Original Post from pixelastic.com
When one HTML element is over another one (like when positioning an
element using position:absolute), you usually can't click through the
top element to access the bottom element.
That's used as a common
technique to prevent the right click on images by some sites (like
Flickr). They just add an empty transparent div over their images to
prevent the lambda user from right clicking and saving the image.
Sometimes, when integrating complex designs, you need those additional
layers, but you also want the user to be able to click through them,
as if they weren't there.
Just use the pointer-events:none css
property to allow click events to go through the element.
This is only
supported by Firefox 3.6+, Chrome and Safari for now.