携帯端末の最初のクリックでホバーオーバーレイとのリンクが開きます

Question

私は、CSSの切り替えを使用して、ホバー上に別のコンテンツを表示するdivを持っています。

リンク<a href="mailto:x@x.x">email adress</a>をオーバーレイする1つのテキスト要素<h3>Another Text</h3>があります。デスクトップブラウザでは正常に動作しています。ホバーをアクティブにした後でリンクをクリックできます。ホバーが要素をクリックして置き換えられる電話機では、問題があります。 - 「別のテキスト」をクリックしてホバーをアクティブにすると、すぐにリンクが開きます。

私の質問は、最初のクリックでリンクを開く方法を制限する方法があるかどうかです。電話デバイス上 理想的なシナリオは次のとおりです。

1. ユーザーが
2. ホバーは、リンクがdisplayedbut
3. ユーザクリックリンクを解雇されていないと、リンクがここ

を解雇されたアクティブ化された「別のテキスト」をクリックしますコード：https://jsfiddle.net/9bc0bcja/2/

Answer 1

私はjavscriptを使って部分的に解決しました：

$(".team-social") 
.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", 
function(e){ 
    if($(this).hasClass("pointerA")){ 
    if(is_touch_device()){ 
     $(this).removeClass("pointerA"); 
    } 
    } 
    else{ 
    $(this).addClass("pointerA"); 
    } 
}); 
$('.team-social a').click(function() { 
if(is_touch_device()){ 
    $(this).parent().removeClass("pointerA"); 
} 
}); 

移行完了後にポインタイベントをアクティブにするため、電話デバイスでオーバーレイをクリックすると直ちに起動されません。

https://jsfiddle.net/9bc0bcja/4/

• は
• 追加されたクラス.pointerA
• が、私はあなたのコードを簡素化クラスに.team-social

Answer 2

Try this Fiddle.

をpointer-events:none;を追加するJavaScript + jQueryのリンクを追加しました必要な要素のみを保持します。

このスクリプトは、モバイルデバイスを使用している場合にのみ動作します。これは、パフォーマンス上の理由から必要なものです。

このコードは、transitionEndではなく、ホバーイベントを監視します。つまり、関数のトリガータイミングはトランジションの長さに依存しません。

if (is_touch_device()) { 
    var $wrap = $(".wrap"), 
     $pw = $wrap.find(".pointer-watch"), 
     $tc = $pw.find(".transition-container"); 

    $pw.addClass("pointerN"); 
    $('.wrap').hover(function wrapHovered() { 
     if ($pw.hasClass("pointerN")){ 
      setTimeout(function enablePE() { 
       $pw.removeClass("pointerN"); 
      }, 0); 
     } 
     else if (!$wrap.is(":hover")) { 
      $pw.addClass("pointerN"); 
     } 
    }); 
}