두 개의 돔 요소를 마우스 이벤트와 관련하여 하나로 결합하기

Question

두 개의 div가 서로 옆에 위치합니다.

나는 mouseenter을 위해 좋아하고 그들이 "하나"로 취급되어야하는 MouseLeave 것입니다. 그들은 서로 나란히 (또는 겹쳐) 정렬됩니다.

이것이 가능합니까?

나는 mouseleave/mouseenter 콤보를 시도했으나 어떤 요소가 먼저 트리거되는지, 첫 번째 요소의 이탈 또는 해당 버디의 입력을 보장 할 수 없습니다.

감사합니다!

Answer 1

onmouseleave에는 입력하는 요소를 알려주는 이벤트 속성 {{toElement}}이 있습니다. 그것은 다른 요소

$(function(){ 

    var box1 = $("#box1"); 
    var box2 = $("#box2"); 

    box1.add(box2).mouseenter(function(){ 
     box1.css("background-color","#CFC"); 
     box2.css("background-color","#DED"); 
    }).mouseleave(function(e){ 
     var domElem = e.toElement; 
     if(domElem==box1[0] || domElem==box2[0]) return; 
     box1.add(box2).css("background-color","#CCC"); 
    }); 


}); 

jsFiddle