Z-endeksini göz ardı ederek olayları tetiklemenin bir yolu var mı? Böyle bir şey varsa

Question

:

İKİ bölümlerde; mouseover olayları tetiklemek için bir yolu var mı?

Düzeltme: Üzgünüm. Sorunu anlayabilmem için sorunu basitleştirmeye çalıştım ve anladığım kadarıyla 100'den fazla div var, bu yüzden bu çözümler işe yaramıyor. Onları adpatlayabilir miyim diye göreceğim. Zaten herkese çok teşekkürler.

Answer 1

için bir bağlantı:

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

O .. cevabını madeinstefanos benzer, ancak örneğe özgü

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

Bu mümkün. Bir öğenin başka bir öğenin altındaki bir parçası için mouseenter | mouseover olayı alamazsınız, ancak öğenin boyutlarını ve konumunu biliyorsanız, mousemove olayını dinleyebilir ve farenin belirli bir alana girdiğinde alabilirsiniz.

seninki gibi iki div'leri yarattı:

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

Ve fare bu senaryoyu yazdım bunu yapmak için, aşağıda olan div tarafından occuped alanına girdiğinde bilmek istiyorum:

$(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'ı dinlemek kadar basit değil, ama iyi çalışıyor. İşte

Ben JSFiddle burada birlikte bir çalışma örneği koymak fiddle