My Question:
Is it possible to disable a div (Z-index 2) so it still remains visible and make it “unnoticeable” by the mouse so I can achieve mouse actions thru it (mouseover’s, clicks) to the enabled divs below it? Meaning you can click the div below as your mouse is on top of the disabled div or mouseover the div on the top and it won’t matter or effect the mouseover action being called by the div below it.
ISSUE:
I have searched on the web and on stackoverflow and can not find the simple answer I am looking for. I have several div’s and some overlap each other on different Z-index’s and the ones on top are messing up the actions on the ones below.
Example:
– -I have a nice graphic box in the lower div (Z-Index 1) that contains a mouseover action. When the mouse hovers over box it triggers actions.
– – I also have some nice graphic text over the box on a div on a new layer (Z-Index 2) but this interferes with the mouseover action on the box below. It makes it seem like my mouse left the box, but it didn’t it just was over a div on a higher level.
Question Summary: Can I disable a div so it’s not clickable or triggers a mouseover call, yet still remains visible?
Yes, you can use the following CSS property:
Depends on what browsers you’re targeting though. Wouldn’t say this property is well supported.
See: http://caniuse.com/pointer-events