擬似グラデーションのリンクにはダブルタップipadが必要

Question

私のメインナビゲーションでは、リンクにバックグラウンドの線形グラデーションを含むカスタムアンダーラインがあります。それは素晴らしいがipadで、私はリンクを実行するために2回タップする必要があります。 1つはホバー用、もう1つはリンク用です。それを解決するために私は何ができますか？ここで

おかげ

は一例です： http://codepen.io/anon/pen/yOmXby

HTML：

<ul> 
<li><a target="_blank" href="#">element</a></li> 
<li><a target="_blank" href="#">element</a></li> 
<li><a target="_blank" href="#">element</a></li> 
<li><a target="_blank" href="#">element</a></li> 
<li><a target="_blank" href="#">element</a></li> 
</ul> 

CSS：

li { 
    list-style: none; 
    float: left; 
    margin: 0 1em; 
} 

ul li a { 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 1.5rem; 
    margin-left: 60px; 
    height: 30px; 
    line-height: 30px; 
    vertical-align: middle; 
    position: relative; 
    display: inline-block; 
} 
ul li a:before { 
    -webkit-transform: translateX(-50%) translateY(0);-ms-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0); 
    -webkit-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s; 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    height: 3px; 
    background: #e95b4c; 
    width: 0; 
    opacity: 0; 
    will-change: opacity; 
} 
ul li a:hover:before, ul li a:focus:before, ul li a:active:before { 
    width:100%; 
    opacity: 1; 
} 

Answer 1

まあ私が見つけた唯一の解決策は、JavaScriptです。

$(document).ready(function() { 

    $('a').on('click touchend', function(e) { 
     var el = $(this); 
     var link = el.attr('href'); 
     window.location = link; 
    }); 

}); 

：

リンク上のすべてのタッチは、リンクを実行します