Glen Hong Glen Hong - 1 year ago 51
Javascript Question

Hover for elements underneath others

I have a situation where I want to provide some contextual help with tooltips...However, the elements I have are sometimes underneath an absolute positioned element.

Whilst I realise this is probably impossible I was thinking there was away to interrogate elements underneath the top layered element?

Im just not sure how this would be done. I dont mind using either css or javascript but any help in the right direction would be appreciated.

Please see the image for the absolute positioned div (grey box with red scribble) over the bars underneath.

Please note that the Green bar is position relative while the individual bars are also positioned : absolute.

Absolute Div

Answer Source

You have to check for a mouse hit inside each child div; Here's a fiddle for it The hit test:

function inside(a, x, y) {
  var l = a.offset().left;
  var t = a.offset().top;
  var r = l + a.outerWidth(true);
  var b = t + a.outerHeight(true);

  return l <= x && x <= r && 
         t <= y && y <= b;