Có cách nào để kích hoạt các sự kiện bỏ qua chỉ mục z không?

Question

Nếu tôi có một cái gì đó như thế này:

Có cách nào để bắn các sự kiện mouseover trên cả hai divs?

Chỉnh sửa: Xin lỗi tất cả .. Tôi đã cố gắng đơn giản hóa vấn đề để hiểu rõ và tôi quên đề cập đến tôi có hơn 100 div như vậy vì vậy có lẽ những giải pháp đó không hoạt động. Tôi sẽ xem tôi có thể adpat họ không. Rất cám ơn mọi người.

Answer 1

Tôi đặt cùng một ví dụ làm việc ở đây với JSFiddle:

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

Nó tương tự như madeinstefanos câu trả lời, nhưng cụ thể với ví dụ của bạn ..

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ó thể. Bạn không thể lấy mouseenter cho một phần tử bên dưới phần tử khác, nhưng nếu bạn biết kích thước và vị trí của phần tử, bạn có thể nghe sự kiện mousemove và nhận khi chuột vào một số vùng cụ thể.

Tôi tạo ra hai divs, như của bạn:

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

Và tôi muốn biết khi chuột đi vào khu vực occuped bởi div đó là dưới đây, để làm điều đó, tôi đã viết kịch bản này:

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

Nó không đơn giản như nghe cho mousenter | mouseover, nhưng hoạt động tốt.

Dưới đây là một liên kết đến fiddle