3

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?

Papa De Beau
  • 3,744
  • 18
  • 79
  • 137

2 Answers2

10

Yes, you can use the following CSS property:

pointer-events: none;

Depends on what browsers you're targeting though. Wouldn't say this property is well supported.

See: http://caniuse.com/pointer-events

Christian
  • 19,605
  • 3
  • 54
  • 70
  • Amazing. I knew it had to be possible and simple at the same time. GREAT! Not that I need it. Just wondering can this changed via jQuery, like turned on or off? Anyway Thanks again. I can't accept your answer yet because it has not be "ten minutes" :) – Papa De Beau Dec 06 '12 at 17:55
  • 1
    Sure, just put this property into a separate class (`.no-pointer-events` etc), then use jQuery to change the class:`.addClass('no-pointer-events')`, or `.toggleClass('no-pointer-events')`. – Christian Dec 06 '12 at 17:56
  • Oh shoot. Just noticed this does not work on IE? or some browsers? Ah man that stinks. – Papa De Beau Dec 06 '12 at 17:57
  • Yeah the link at the end of my answer shows the support of this property. Not great support, definitely can't rely on it. – Christian Dec 17 '12 at 02:17
1

Did you try making your level 2 div actually be a child of the level 1? You should be tracking mouseenter/mouseleave as opposed to mouseover/mouseout

small explanation: mouseout gets fired whenever your mouse is not directly over the captured event target, even if your pointer goes over a child of your target. for mouseleave it will only be fired once your mouse pointer leaves both the target element and any of its children. Think of it as mouseenter being analog to CSS :hover.

gonchuki
  • 4,064
  • 22
  • 33