我可以让一个元素看不见徘徊吗？

Question

我有一个具有星爆效果的div(透明的png背景),我想在它们悬停时叠加在一系列的imgs上; 我必须使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>

JS是这样的

$('.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,如何处理它们以便它们在前面,将bg图像放在悬停的图像上,但不会妨碍它们盘旋.我不确定这是否可能,但希望有办法.将它们分开是因为我想以不同的方式为它们制作动画.

Answer 1

您可以使用CSS pointer-events属性:

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

.starbursts {
   pointer-events: none
}