我可以使悬停不可见的元素吗?

2022-01-22 00:00:00 animation hover jquery css

我有一个具有星爆效果的 div(透明 png 背景)，我想在它们悬停时覆盖在一系列 imgs 上；我必须使 div 变大以包含图像，但它会妨碍检测图像上的悬停.(我将它们全部作为背景图像，因此它们是通过高分辨率 css 媒体查询加载的)

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是这样的

$('.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 图像位于悬停图像的顶部，但不会妨碍悬停在它们上面.我不确定这是否可能，但希望有办法.让它们分开，因为我想以不同的方式为它们制作动画.

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.

推荐答案

你可以使用 CSS 指针事件 属性:

You can use the CSS pointer-events property:

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

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
}

相关文章