javascript - 关于鼠标事件将两个 Dom 元素合二为一

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