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

【问题标题】：Combining Two Dom Elements as One with Regards to Mouse Events关于鼠标事件将两个 Dom 元素合二为一
【发布时间】：2011-10-25 08:39:44
【问题描述】：

我有两个 div 位于彼此相邻的所有内容之上。

为了 mouseenter 和 mouseleave，我希望它们被视为“一个”。它们彼此相邻（或重叠）排列。

这可能吗？

我尝试过执行 mouseleave/mouseenter 组合，但我不能保证哪个会先触发，从第一个元素离开或进入其伙伴。

谢谢！

【问题讨论】：

你不能只嵌套较小的div并用绝对定位将它放在外面吗？然后你可以将进入/离开应用到包含的 div。
在两者周围放置一个 div 并使用它。
将尝试第一条评论。 :D
尝试第一个评论，但想出第二个 div 的放置位置是 PITA。我宁愿使用页面上与较大框对齐的现有元素。

标签： javascript mouseleave mouseenter

【解决方案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

【讨论】：