有沒有辦法忽略忽略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