Is there a way to fire over events ignoring z-index?

Question

If I have something like this:

Is there a way to fire the mouseover events on BOTH divs?

Answer 1

It's possible. You cannot get the mouseenter|mouseover event for a part of a element that is below another element, but if you know the dimensions and the position of the element, you can listen for mousemove event and get when the mouse enters in some particular area.

I created two divs, like yours:

And I want to know when the mouse enters the area occuped by the div that is below, to do that I wrote this script:

$(function (){

  var divOffset = {
    top: $("#belowDiv").position().top,
    left: $("#belowDiv").position().left,
    right: $("#belowDiv").position().left + $("#belowDiv").width(),
    bottom: $("#belowDiv").position().top + $("#belowDiv").height(),
    isOver: false
  }


  $(window).mousemove(function (event){
    if (event.pageX >= divOffset.left && event.pageX <= divOffset.right && event.pageY >= divOffset.top && event.pageY <= divOffset.bottom){
      if (!divOffset.isOver){
        divOffset.isOver = true;

        /* handler the event */
        alert("gotcha");
      }
    }else{
      if (divOffset.isOver){
        divOffset.isOver = false;
      }
    }
  });
});

It's not simple as listen for mousenter|mouseover, but works fine.

Here a link to fiddle