jquery - 如何捕捉不同级别div的悬停？

Question

我有两个没有嵌套但似乎重叠的 div 元素。

当鼠标进入第二个 div 时，如何捕捉第一个 div 的悬停功能？

（当鼠标在橙色区域时，我希望鼠标也在灰色区域。）

请检查 [http://jsfiddle.net/tZFuX/2/][1]

谢谢！

Answer 1

使用纯 CSS，您可以使用pointer-events，只要您对结果仅适用于 WebKit 和 Firefox感到高兴，并且还从其应用的元素中删除所有鼠标交互性（无点击、文本选择等） .

您可以按以下方式应用它：

.div2 {
    pointer-events: none;
}

http://jsfiddle.net/barney/Mcxf2/

因此，将其与脚本解决方案联系起来变得非常容易。对于没有指针事件依赖项的完全脚本化解决方案，您必须将mousemove事件绑定到整个文档（或窗口或正文——或您知道将在视觉上包含这两个元素的任何元素），然后测试属性。这是相当昂贵的，因为无论您使用什么代码来测试元素的光标位置，都将在鼠标移动期间连续执行——jQuery 网站提供了一个关于此的基本教程：

http://jsfiddle.net/barney/AmQhs/

代码一定要复杂一些，但你明白了要点。

Answer 2

尝试这个：fiddle

$('.div1').on({
   mouseenter: function(){
      alert('mouse entered at div1');
   }
});

$('.div2').on({
   mouseenter: function(){
     alert('mouse entered at div2');
     $('.div1').trigger('mouseenter');
   }
});

编辑：小提琴

警报将以这种方式工作，但您可以使用 addClass 进行试用：

 $('.div2').on({
    mouseenter: function () {
       $('.div1').addClass('active');
    }
 });

 $('.div1').on({
    mouseout: function () {
       $(this).removeClass('active');
    }
 });