Gibt es eine Möglichkeit, Ereignisse auszulösen, die den Z-Index ignorieren?

Question

Wenn ich so etwas wie dieses:

Gibt es eine Möglichkeit, die Mouseover-Ereignisse auf BEIDEN divs zu feuern?

Edit: Leider alle .. Ich habe versucht, das Problem simplfy so klar war, zu verstehen, und ich vergaß zu erwähnen, ich mag, dass mehr als 100 divs haben so wohl diese Lösungen nicht funktionieren. Ich werde sehen, ob ich sie adaptieren kann. Vielen Dank an alle.

Answer 1

Ich habe eine Arbeitsbeispiel hier mit JSFiddle:

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

Es ist ähnlich Antwort auf madeinstefanos, aber spezifisch für Ihr Beispiel ..

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 ist möglich. Sie können das mouseenter | mouseover-Ereignis nicht für einen Teil eines Elements abrufen, der sich unter einem anderen Element befindet. Wenn Sie jedoch die Dimensionen und die Position des Elements kennen, können Sie auf mouse move-Ereignisse warten und erhalten, wenn die Maus in einen bestimmten Bereich eintritt.

Ich habe zwei Divs, wie das Ihre:

<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> 

Und ich möchte wissen, wenn die Maus den Bereich durch die div occuped eingibt, der unterhalb, zu tun, dass ich dieses Skript geschrieben:

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

Es ist nicht einfach, wie für mousenter hören | Mouseover, aber funktioniert gut.

Hier ist ein Link zu fiddle