你如何使透明元素不可交互？

CSS

.element { 
    opacity: 1.0; 
    transition: opacity 0.3s linear; 
} 

.element.hidden { 
    opacity: 0.0; 
}

// hide 
$('someElement').addClassName('hidden'); 

// show 
$('someElement').removeClassName('hidden');

的問題，這是一種無形的因素依然佔據空間。如果用戶試圖點擊它下面的某個東西，這個不可見的元素會攔截點擊，並且用戶會感到困惑。是否有一個CSS屬性會使元素不可交互？我知道在.hidden課程中有一些竅門，例如設置top:-999em，但我問你是否知道任何優雅的解決方案。

來源

2012-11-05 Pwner

標準做法是在淡出後設置'display：none;'。我不確定是否簡單地將它添加到'.element.hidden'就足夠了，但它值得一試。 – Shmiddty

@Shmiddty這是用JS突然隱藏東西的方法。如果將'display：none'與CSS轉換組合在一起，則根本看不到轉換，因爲該元素首先消失，並在動畫消失後應用動畫。 – Pwner

我不確定'顯示'是否是一種動畫屬性。顯然它不是。 – Shmiddty

您將需要過渡visibility還有：

.element { 
    opacity: 1.0; 
    visibility: visible; 
    transition: opacity 0.3s linear, visibility 0.3s linear; 
} 

.element.hidden { 
    opacity: 0.0; 
    visibility: hidden; 
}

可以通過點擊與visibility: hidden的元素;即它不會攔截點擊。

如果您需要的元素完全消失而不是繼續佔用空間，您需要使用display: none來代替，但這不是一個動畫屬性，因此您會看到該元素突然消失而不是淡出。

來源

2012-11-05 20:00:52 BoltClock

你如何使透明元素不可交互？

回答

相關問題