iOS忽略<a>標記和尊重：懸停

我有一個列表元素與div內容裏面和一個標籤包裝div的內容。示例代碼：iOS忽略<a>標記和尊重：懸停

<li> 
    <a href="http://google.com/"> 
    <div id="tease-info"> 
     <div class="inset-img-border fade"></div> 
     <img src="/img/img.jpg"> 
     <div id="arrow-right-small"></div> 
     <h4 class="title">E-mail Marketing</h4> 
     <p class="title">Messaging That Pays</p> 
    </div> 
    </a> 
</li>

在我的樣式表中，我將一個懸停應用於內部內容的'tease-info'。像這樣：

#tease-info:hover h4{ 
    color: rgb(191,69,164); 
    }

問題只出現在ios上。在我的ipad上，當我點擊li元素時，我得到了原生ios的灰色覆蓋圖，讓你知道你選擇的元素。我也得到懸停狀態。但是，當我釋放時，我沒有被帶到href並且懸停狀態保持啓用狀態。

看起來懸停狀態超過了標籤？發生什麼事？

來源

2012-03-15 Ryan Dunlap

iOS不支持'：hover'僞類，因爲它沒有懸停的概念。一般來說，它會試圖把它當作一個粘性的'：active'來處理，但是更多的只是因爲它並不真正知道如何處理它。如果您嘗試將懸停樣式應用於'a'而不是'div'（您可能需要修改HTML以達到此目的）？ – BoltClock 2012-03-15 16:24:57

我有一個元素'

'絕對定位在div和懸停應用到它。當我刪除這個元素時，一切都很好，而且href不再被忽略。奇怪的是，我有其他絕對定位的元素在同一個div中。不確定究竟是什麼原因。 – 2012-03-15 16:50:32

我也有這個問題......它似乎忽略了懸停效果，忘記了原始的abchor點擊效果。我可能會嘗試禁用iOS的懸停效果。會讓你知道我是否找到了解決辦法 – nickmorss 2012-04-10 15:22:45

好的我現在有一個修復程序。從使用Modernizr開始，我讀了一種技巧，建議使用.touch和.no-touch類來解決問題。這個工程很容易地如果您：懸停事件在CSS

.ugcpost:hover .meta {display:block;} 
.touch .ugcpost:hover .meta {display:none;}

這解決了問題表示，只要確保你有觸摸事件的Modernizr的配置。如果你使用JS來顯示和隱藏你的懸停，另一個更充實的選擇是強制頁面按下href只需點擊一下。有一個問題需要注意，但是您要確保區分真正的點擊而不是屏幕滾動。所以請看下面的JS，再次使用Modernizr，儘管你的代碼只是檢查客戶端的用戶代理。

followPost : function(item) { 
     $(item).on('touchend', function(e){ 
       location.href = $(item).attr('href'); 
       $(item).off('touchend'); 
      }); 
      $(item).on('touchmove', function(e){ 
       $(item).off('touchend'); 
      }); 
    }, 
    initTouchEnhancements : function() { 
     $('.collection a, .post a, .ugcpost a').live('touchstart', function() { 
      var item = this 
     followPost(item); 
     }); 
    }

注意：這也依賴於在JQ 1.7中使用'on'和'off'函數。感謝這篇文章的確認。 Stop the touchstart performing too quick when scrolling

來源

2012-04-11 14:00:27 nickmorss

iOS忽略<a>標記和尊重：懸停

回答

相關問題