CSS overlay with no interactions possible?

HTML & CSS
1

I’m using jquery sparkline to draw a line graph.
But I want to overlay a div over the graph while, maintaining the mouse hover that the graph has by default.
Is that possible? To overlay a div that is transparant to interaction?

2

You can set the overlying div to

{pointer-events: none;}

though this doesn’t work in any version of IE or Opera.

I believe there’s a jQuery solution for it too.

3

This seems to be the one mentioned the most.

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

4

Thanks Paul. I did see a jQuery example of this recently, but seem not to have bookmarked it. (Sigh.) I think the reason must have been that I was unconvinced something like this should ever be needed in the first place, though no doubt someone will prove me wrong. :slight_smile:

5

I did see this one but I couldn’t see any info on it anywhere.

I’ve needed pointer events a few times now as you can put shadows and linear fades over a range of elements but still have the elements behave normally. The alternative is slicing the effect into many parts and applying to individual elements which is a pain.

6

Ah, thanks, that’s the one. :slight_smile: I have seen this used somewhere.

The alternative is slicing the effect into many parts and applying to individual elements which is a pain.

Indeed, that did come to mind. Perhaps the new CSS3 filters will make life easier in that regard, as I presume they don’t affect links beneath them. (They apparently slow the browser down considerably, though.)