iOSが<a>タグを無視しています：ホバー

Question

divコンテンツを含むリスト要素とdivコンテンツをラッピングするタグがあります。例コード：

<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に連れてこないので、ホバー状態は有効のままです。

ホバー状態がタグを覆いすぎているようですか？何が起こっている？

Answer 1

ok私は今修正があります。 Modernizrを使ってimから始めるには、.touchと.no-touchクラスを使って問題を解決する方法をお読みください。あなたの場合これはかなり簡単に動作します：ホバーイベントはCSS

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

で表現され、これはちょうどあなたがあなたのModernizrの設定でタッチイベントを持っていることを確認し、問題を解決します。あなたのホバーを表示したり隠したりするためにJSを使用している場合は、ページを強制的にクリックしてhrefに従わせるという方法があります。実際のクリックとスクリーンスクロールの区別を確実にしたいと思っていますが、注意すべき点が1つあります。ですから、Modernizrを使って、次のJSを見てください。ちょっとクライアントのUserエージェントをチェックするだけです。

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で「オン」を使用すると「オフ」の機能に依存しています。これを確認するこのポストのおかげで。 Stop the touchstart performing too quick when scrolling