2つのDOM要素をマウスイベントに関連して1つにまとめる

Question

私はお互いの隣に位置するすべてのものの上に2つのdivを持っています。

私はMouseEnterイベントのために好きで、彼らは「1」として扱われることをmouseleaveと思います。それらは互いに隣り合っている（または重複している）。

これは可能ですか？

私はmouseleave/mouseenterのコンボを試しましたが、最初にトリガーするもの、最初の要素からの離脱、またはバディへの入力を保証できません。

ありがとうございます！

Answer 1

onmouseleaveには、入力する要素を示すイベントプロパティ{{toElement}}があります。

それは他の要素ではない場合は、あなただけの巣小さいのdivをすることはできませんし、絶対位置で外にそれを置く

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