iOS WebView不釋放

我正在設計一個針對利用css的iOS優化的HTML頁面。當用戶點擊按鈕時，它應該淡出然後淡入。然而，它不會退色，不透明度保持在50％。iOS WebView不釋放

這裏是我使用的CSS：

.increaseFont{ 
     opacity:1.0; 
} 
.decreaseFont{ 
     opacity:1.0; 
} 
.increaseFont:hover{ 
    opacity:0.5; 
} 
.decreaseFont:hover{ 
    opacity:0.5; 
}

點擊之前： enter image description here

點擊後： enter image description here

爲什麼發生這種情況的任何想法？

來源

2014-03-19 Jake Chasan

觸發淡入的原因是什麼？當你的手指離開按鈕？ – Tony

是的，這是應該做的。當它在桌面上運行時，當鼠標從按鈕上移除時，它會退到100％。 –

我的回答有用嗎？ – Tony

因此，如果我理解用戶何時將他們的手指有效地按下按鈕，它應該變爲淡入淡出，然後當用戶鬆開手指時，它應該回到不透明度1，而是保持在.5 。

如果是這種情況，這與觸摸設備缺少事件的問題有關。發生的事情是，當你點擊它時，它保持懸停狀態。如果你去網頁視圖中的其他地方點擊，那麼你會看到它變回到1的不透明度。爲了用觸摸設備做這樣的事情，儘管你需要使用javascript並觀察下來和上升的事件因爲觸摸設備觸發這一點。

您可能會收到的另一個建議是使用:active而不是:hover，但是如果不是更差的結果，您會看到類似的結果。所以這就是發生這種情況的原因。至於如何解決這個問題。您可以使用touchstart和touchend事件，這些事件是您可以在javascript中偵聽觸發事件時觸發的事件。這是一個JSFiddle示例。

http://jsfiddle.net/E3dNN/2/

基本具有以下JavaScript代碼

document.getElementById('box').addEventListener('touchstart', function() { 
    $('#elementID').css('opacity', '0.5'); 
}); 
document.getElementById('box').addEventListener('touchend', function() { 
    $('#elementID').css('opacity', '1'); 
});

在這來了這樣的新的CSS規範將在CSS處理，但不會是一會兒。

另外這裏也是一個blog post也談到這一點。

祝你好運。

來源

2014-03-19 17:53:29 Tony

:hover可能不是你在尋找的觸摸屏上...我會嘗試:active而不是其他psuedo classes。

來源

2014-03-19 17:52:21 Hylianpuffball

當我嘗試：活動時，不透明度從不加載。它只是保持100％。你有什麼想法，可能在Photoshop中以50％的不透明度渲染另一個圖像並加載它，而不是試圖使圖像不透明度達到50％？ –

@JakeChasan這不會不幸，因爲它會再次卡在那張圖片上。可悲的是沒有快速解決這個問題。 – Tony

iOS WebView不釋放

回答

相關問題