css：懸停，觸摸屏和單頁應用程序

我正在用HTML，CSS和Javascript（沒有jQuery或類似的）製作單頁面應用程序。此應用程序由許多可通過Javascript更改的UI頁面組成。在電腦上使用鼠標的用戶體驗很好，但對觸摸屏（手機等）不太好。css：懸停，觸摸屏和單頁應用程序

有很多CSS懸停圖形效果的按鈕。如果我改變頁面點擊觸摸屏上的一個按鈕，當頁面「更改」時，指針停留在那裏觸發下一個元素出現在相同位置的CSS懸停。這種效果非常惱人，但我無法弄清楚如何解決它。

的代碼非常簡單：

CSS

button { 
    background-color: #XXXXXX; 
} 

button:hover { 
    background-color: #ZZZZZZ; 
}

HTML

<button onclick="changepage()"></button>

來源

2014-12-30 BillyBelly

我建議檢測移動瀏覽器（見[這裏]（http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser）），然後有條件禁用懸停效果。你也許可以在你的'

您可以使用modernizr與觸摸事件的檢測，不是使用

html.no-touch button:hover { 
    background-color: #ZZZZZZ; 
}

沒有Modernizr的，你可以添加這個簡單的代碼追加無觸摸/觸摸類HTML標記

<script type="text/javascript"> 

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test(navigator.userAgent)) { 
     document.getElementsByTagName('html')[0].className += ' touch'; 
    }else{ 
     document.getElementsByTagName('html')[0].className += ' no-touch'; 
    } 

</script>

來源

2014-12-30 02:53:33 Neji

謝謝你的好意！最後，我製作了一個非常簡單的腳本，它的功能非常完美......即使對於帶有鼠標的觸摸式計算機（如我的）也是如此，當然也適用於手機。沒有必要檢測設備！解決方法是在頁面更改後通過調用函數refresh_hover（）在光標指針下添加一個非常小的div。這個div 1px x 1px在用戶點擊它或者光標離開它時立即被移除。通過這種方式，當內容在指針後面改變時，懸停效果將被刪除，但當用戶執行某些操作時會恢復懸停效果！你可能會認爲這很愚蠢，但很簡單，效果很好！

這：

function refresh_hover(){ 

    if(!event){ 
     return false; 
    } 

    var x = event.clientX; 
    var y = event.clientY; 

    var div = document.getElementById('mouse_div'); 

    if(!div){ 
     document.body.innerHTML=document.body.innerHTML 
     +'<div style="position: fixed; z-index: 1000; height: 1px; width: 1px; display: block;" id="mouse_div" onmouseout="this.style.display=\'none\'" onclick="this.style.display=\'none\'"></div>'; 
     div = document.getElementById('mouse_div'); 
    } 


    div.style.display='block'; 
    div.style.top=y+'px'; 
    div.style.left=x+'px' 
}

來源

2014-12-30 11:21:42 BillyBelly

css：懸停，觸摸屏和單頁應用程序

回答

相關問題