Existe-t-il un moyen de déclencher des événements en ignorant z-index?

Question

Si j'ai quelque chose comme ceci:

est-il un moyen de tirer les événements mouseover sur les deux divs?

Edit: Désolé tout .. J'ai essayé de simplifier le problème afin qu'il soit clair pour comprendre et j'ai oublié de mentionner que j'ai plus de 100 divs comme ça alors probablement que ces solutions ne fonctionnent pas. Je vais voir si je peux les adpater. Merci beaucoup à tous.

Answer 1

Je mets ensemble un exemple de travail ici avec jsFiddle:

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

Il est similaire à madeinstefanos réponse, mais spécifique à votre exemple ..

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

C'est possible. Vous ne pouvez pas obtenir l'événement mouseover | mouseover pour une partie d'un élément qui est en dessous d'un autre élément, mais si vous connaissez les dimensions et la position de l'élément, vous pouvez écouter l'événement mousemove et obtenir la souris dans une zone particulière.

J'ai créé deux divs, comme la vôtre:

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

Et je veux savoir quand la souris entre dans la zone Habité par la div qui est ci-dessous, à faire que j'ai écrit ce 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; 
     } 
    } 
    }); 
}); 

Ce n'est pas simple, écoutez mousenter | mouseover, mais ça marche bien.

Voici un lien vers fiddle