我可以制作一个看不见的元素吗？

我有一个div，它有一个starburst类效果（透明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，如何处理他们，让他们在前面，用在悬停的图像上的背景图片，但在盘旋的方式没有得到在他们。我不确定这是可能的，但希望有一种方法。让他们分开，因为我想以不同的方式为他们设置动画。

来源

2012-07-06 Damon

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

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

.starbursts { 
    pointer-events: none 
}

来源

2012-07-06 05:11:08 undefined

令人惊讶的从sitepoint.com失踪。我有点不高兴！它是MDN。谢谢你的提示 – MusikAnimal 2012-07-06 05:20:36

这是我第一次听说过！ cool – Damon 2012-07-06 05:47:47

这个功能还有一个非标准的modernizr测试：https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css-pointerevents.js – Damon 2012-07-09 00:43:06

我可以制作一个看不见的元素吗？

回答

相关问题