Can I make an element invisible to hovers?

Question

I have a div that has a starburst kind of effect (transparent png background) that I want to overlay on a series of imgs as they are hovered; I have to make the div large to contain the image, but then it gets in the way of detecting the hovers on the images. (I have them all as background images so they're loaded via a high resolution css mediaquery)

Each 'image' is a series of elements looks like this right now:

<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 is like this

$('.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');
    }
);

My question is where to put the .starbursts, how to deal with them so that they are in front, with their bg image on top of the hovered image, but doesn't get in the way of hovering on them. I'm not sure this is even possible but hoping there's a way. Have them separated because I want to animate them on differently.

Answer 1

You can use the CSS pointer-events property:

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

.starbursts {
   pointer-events: none
}