Jquery 我可以使元素对悬停不可见吗？

我有一个div，它有一种类似星暴的效果（透明的png背景），我想在一系列img悬停时覆盖它；我必须使div变大以包含图像，但它会妨碍检测图像上的悬停。（我将它们全部作为背景图像，因此它们通过高分辨率css mediaquery加载）

每个“图像”都是一系列元素，现在看起来是这样的：

<div class="section">
    <div class="starburst"></div>
    <a href="link">
        div class="image">
            <div class="non-hover"></div>
            <div class="hover"></div>
        </div>
        <p>Caption</p>
    </a>
</div>

我的问题是把星暴放在哪里，如何处理它们，使它们在前面，把它们的bg图像放在悬停图像的上方，但不妨碍它们的悬停。我不确定这是否可能，但希望有办法。将它们分开，因为我想以不同的方式设置它们的动画。

您可以使用CSS属性：

CSS属性指针事件允许作者控制特定图形元素在什么情况下（如果有）可以成为鼠标事件的目标

---

令人惊讶的是，sitepoint.com上没有。我对此有点不安！是的。感谢酷炫的tipThere为该功能提供了非标准的Modernizer测试：

$('.section a').hover(
    function () {
        $('.speaker .hover').hide();
        $(this).find('.non-hover').addClass('focus');
        $(this).find('.hover').stop().show().animate({opacity:1.0}, 1000);
    },
    function () {
        $(this).find('.hover').stop().animate({opacity:0.0}, 0);
        $(this).find('.non-hover').removeClass('focus');
    }
);

.starbursts {
   pointer-events: none
}