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

Posted 2023-03-06

【中文标题】我可以使悬停不可见的元素吗？

【英文标题】：Can I make an element invisible to hovers?

【发布时间】：2012-07-06 13:18:01

【问题描述】：

我有一个具有星爆效果的 div（透明 png 背景），我想在它们悬停时覆盖在一系列 imgs 上；我必须使 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 图像位于悬停图像的顶部，但不会妨碍悬停在它们上面。我不确定这是否可能，但希望有办法。让它们分开，因为我想以不同的方式为它们制作动画。

【参考方案1】：

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

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

.starbursts 
   pointer-events: none

【讨论】：

sitepoint.com 中令人惊讶的缺失。我对此有点不爽！ MDN 确实如此。感谢您的酷提示

这个功能也有一个非标准的modernizr测试：github.com/Modernizr/Modernizr/blob/master/feature-detects/…