Question

我有两个div元素，它们没有嵌套，但看起来很重叠。

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

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

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

谢谢！

Answer 1

试试这个：fiddle

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

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

编辑：fiddle

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

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

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

Answer 2

使用纯CSS，您可以使用pointer-events，只要您对结果will only work in WebKit & Firefox感到满意，并且还会从应用的元素中删除所有鼠标互动（无点击，文字选择）等等。）

您可以按如下方式申请：

.div2 {
    pointer-events: none;
}

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

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

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

代码必须更精细，但你得到了要点。

如何抓住不同级别的div？

2 个答案:

编辑：fiddle