我可以製作一個看不見的元素嗎？

我有一個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

我可以製作一個看不見的元素嗎？

回答

相關問題