javascript - マウスイベントに関して 2 つの Dom 要素を 1 つに結合する

Question

すべての上に 2 つの div が隣り合って配置されています。

mouseenter と mouseleave のために、それらを「1つ」として扱いたいと思います。それらは互いに隣り合って並んでいます（または重なり合っています）。

これは可能ですか？

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");
  });


});

jsフィドル