¿Hay alguna forma de disparar sobre eventos que ignoran el índice Z?

Question

Si tengo algo como esto:

¿Hay una manera de despedir a los eventos mouseover en ambos divs?

Edit: Lo siento todo .. Intenté simpatizar con el problema, así que era claro de entender y olvidé mencionar que tengo más de 100 divs así que probablemente esas soluciones no funcionen. Voy a ver si puedo conectarlos. Muchas gracias a todos de todos modos.

Answer 1

que arme un ejemplo de trabajo aquí con jsFiddle:

http://jsfiddle.net/gfosco/CU5YT/

Es similar a madeinstefanos respuesta, pero adaptadas a su ejemplo ..

var mouseX = 0; 
var mouseY = 0; 
var front = 0; 
var back = 0; 

function log(text) { 
    $("#log").append(text + '<BR>'); 
} 

function mouseWithin(selector) { 
    var pos = $(selector).position(); 
    var top = pos.top; 
    var left = pos.left; 
    var height = $(selector).height(); 
    var width = $(selector).width(); 

    if (mouseX >= left && mouseY >= top && mouseX <= left + width 
        && mouseY <= top + height) { 
    return true; 
    } 
    return false; 
} 

$(document).bind('mousemove', function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    if (front == 1 && !mouseWithin("#front")) { 
      front = 0; 
      log('Front Leave'); 
    } 
    if (back == 1 && !mouseWithin("#back")) { 
      back = 0; 
      log('Back Leave'); 
    }  
    if (front === 0 && mouseWithin("#front")) {  
      front = 1; 
      log('Front Hover'); 
    } 
    if (back === 0 && mouseWithin("#back")) { 
      back = 1; 
      log('Back Hover'); 
    }   

}); 

Answer 2

Es posible. No puede obtener el mouseover mouseover evento para una parte de un elemento que está debajo de otro elemento, pero si conoce las dimensiones y la posición del elemento, puede escuchar mousemove event y get cuando el mouse entre en algún área en particular.

creé dos divs, como la suya:

<div id="aboveDiv" style="position:absolute;top:30px;left:30px;width:100px;height:100px;background-color:red;z-index:2;"></div> 
<div id="belowDiv" style="position:absolute;top:80px;left:80px;width:100px;height:100px;background-color:green;z-index:1;"></div> 

y quiero saber cuando el ratón entra en el área de Ocupado por el div que está por debajo, para hacer eso escribí este guión:

$(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; 
     } 
    } 
    }); 
}); 

No es tan simple como escuchar mouseover, pero funciona bien.

Aquí un enlace a fiddle