有没有办法忽略忽略z-index的事件？

Question

如果我有这样的事情：

有没有办法解雇两个div的鼠标悬停事件？

编辑：对不起所有..我试图简化的问题，所以很明显，明白了，我忘了提及我有超过100个divs，所以可能这些解决方案不起作用。我要去看看我能否支持他们。无论如何非常感谢大家。

Answer 1

链接我在这里把一个工作示例用的jsfiddle：

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

它类似于madeinstefanos答案，但具体到你的例子..

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

这是可能的。对于位于另一个元素下面的元素的一部分，您不能获取mouseenter | mouseover事件，但是如果您知道元素的尺寸和位置，则可以侦听mousemove事件，并在鼠标进入某个特定区域时获取该事件。

我创建两个div，像你这样的：

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

而且我想知道当鼠标进入由小于，这样做，我写这个剧本的DIV occuped面积：

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

听起来像mousenter | mouseover并不简单，但工作正常。

这里fiddle