jquery - 在jQuery中悬停突出显示div

Question

我之所以要<div>突出显示您的选择是因为效果需要在多种类型的元素上。

我想要发生的是突出显示 div 将被鼠标事件完全忽略。

据我所知，唯一的方法是使用trigger().

$('#hover').mouseenter(function(){
    // that refers to the element below it.
    $(that).trigger('mouseenter');
});

然而，悬停高亮 div 本身也被 mouseenter 激活：

$('.item').bind('mouseenter.hover', function() {
    hoverEffect(this);      
})

这是一个jsfiddle。

如何触发除 mouseenter.hover之外的所有 mouseenter 事件？

或者，如何使所有鼠标事件完全忽略div？所以它只会听它下面的那个。

感谢您的时间。

Answer 1

您可以尝试像这样使用Pointer-Events css 属性：

#hover{
   pointer-events: none;
}

这将教会#hover 忽略鼠标事件，并将它们通过自身传播到底层元素。

这在某些浏览器中存在问题，并且可能会产生意想不到的副作用。请在查阅文档后负责任地使用。