iPad上的CSS問題

我在iPad上有一個非常簡單的CSS相關問題。我有一組子鏈接在CSS中定義爲;iPad上的CSS問題

#leftNav .searchBySub {...} 
#leftNav a.searchBySub:hover {...} 
#leftNav .searchBySubClicked {...}

而且我在那裏我已經定義

$("#leftNav a.searchBySub").live("touchstart",function(){...} 
$("#leftNav a.searchBySub").live("click",function(){...}

一個JS現在的問題是，當我點擊任何iPad上的子鏈路的，爲什麼它應用：狀態CSS懸停於它？也可以以某種方式改變這種行爲？

作出任何簡單/基本的建議，因爲我已經嘗試過基本修復前，請仔細閱讀問題..

而且你說之前，有在iPad上沒有懸停事件，我是知道的，但在我的情況下，它確實應用：懸停狀態類，當鏈接被點擊..

我知道你可能會說只是從CSS中刪除：懸停定義，但不幸的是我不能這樣做，因爲相同CSS也被桌面瀏覽器使用（甚至對於媒體查詢，它並沒有幫助）

所以我的主要問題是h我是否會在點擊鏈接時覆蓋：懸停狀態？

更新...

下面是我試過的代碼;

$("#leftNav a.searchBySub").live("touchstart",function(){ 
       var a=document.getElementsByClassName("searchBySub");     
       for(var i=0;i<a.length;i++)     
       {       
       a[i].ontouchstart=function(e){ 
window.location=this.getAttribute("href"); 
       console.log("ontouchstart2"); 
       e.stopPropagation();         
       e.preventDefault(); 
       return false;}     
       } 
       $("#leftNav a.searchBySub").removeClass("searchBySubClick"); 
       $(this).addClass("searchBySubClick"); 
       clickEvent($(this)); 
      });

來源

2011-07-27 testndtv

你確定它是懸停狀態嗎？既然你說懸浮狀態在iPad上不存在，那麼它如何應用呢？也許爲了兼容性，移動Safari可能會將：hover視爲：active，或者：focus one。嘗試爲：active或：focus鏈接指定規則，以查看是否改變了某些內容。 –

Safari瀏覽器的手機處理特定順序的事件：當您按下然後鬆開屏幕會出現以下情況：

ontouchstart - onmouseover/:hover - mousedown - mouseup - click/:active

注意onmouseout（該:hover狀態的結束）將不會被調用除非你點擊其他地方。花了我一段時間來弄清楚。

作爲解決方法，您可以使用這種類型的代碼來觸發鏈接之前發生onmouseover事件。

 function ipadLinksHack()//Call it onload 
     { 
       var a=document.getElementsByTagName("a"); 
       for(var i=0;i<a.length;i++) 
       { 
         //Note to self: ontouchstart and not onclick! :) 
         a[i].ontouchstart=function(e) 
         { 
           window.location=this.getAttribute("href"); 
           e.stopPropagation(); 
           e.preventDefault(); 
           return false;//Prevents the link default behavior 
         } 
       } 
     }

備註：你也可以使用這個片段，以防止野生動物園開幕，當你在「獨立模式」（又名Web應用程序），然後單擊鏈接。這是這個功能的主要目的。此外，閱讀官方文檔上的event handling guide可能會有所幫助。

來源

2011-07-27 14:23:53

Thx很多...您似乎已經很好地理解了這個問題....雖然我嘗試了在應用中給出的代碼，但仍然在iPad上應用：懸停CSS ...所以仍然在尋找一些方式來覆蓋它.. – testndtv

對不起，我犯了一個錯誤，在上面的代碼中，我添加了我的'onclick（）'事件，這發生在'：hover'之後。應該把它放在'ontouchstart'事件上。我的錯。（我編輯了上面的代碼，可以隨意再試一次）。 –

好的......沒有問題..我會嘗試相同的...所以基本上上面的代碼將取消/阻止鏈接進入懸停狀態，當它被點擊在iPad上......是否正確？ – testndtv

當用戶通過單攻呢，側重的元素：hover樣式被應用，鼠標懸停，鼠標移動，鼠標按下，鼠標鬆開，然後單擊事件觸發（始終;並按此順序排列）。

因此：即使在iOS上也應用懸停。不知道iOS是否支持：focus（或者也許：active），但是你可以用它來'撤消'hover所做的更改。

或者使用JS調用.blur（）（未測試）。

來源

2011-07-27 14:37:43 Gerben

確切地說....這就是我面臨的問題......懸停CSS在iPad上應用...不確定是否有針對此問題的標準修復程序？ – testndtv

查看document.styleSheets[0].deleteRule()函數，並簡單地刪除每個包含「：hover」的規則。這裏是some doc和some example of usage。

由於僞元素腳本在大多數瀏覽器上似乎不可靠，所以只需循環遍歷樣式表並刪除「a：hover」規則即可。

來源

2011-07-29 07:47:16

iPad上的CSS問題

回答

相關問題