Могу ли я сделать элемент невидимым для наведения?

У меня есть div с эффектом звездообразования (прозрачный фон png ), который я хочу наложить на серию изображений, когда они зависают; Я должен сделать div большим, чтобы содержать изображение, но тогда это мешает обнаружению наведения на изображения. (Все они у меня есть в качестве фоновых изображений, поэтому они загружаются с помощью медиазапроса css с высоким разрешением)

Каждое «изображение» представляет собой серию элементов, которые сейчас выглядят так:

<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 изображением поверх наведенного изображения, но не мешали наводить на них. Я не уверен, что это даже возможно, но надеюсь, что есть способ. Разделите их, потому что я хочу анимировать их по-разному.