双击 ipad 需要 link，伪渐变

Question

在我的主导航中，links 在背景上有一个带有线性渐变的自定义下划线。它运行良好，但在 ipad 上，我需要点击两次才能执行 link。一个用于悬停，另一个用于 link。我能做些什么来解决它？

谢谢

这是一个例子： 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。

每次触摸 link 都会执行 link :

$(document).ready(function() {

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

});

双击 ipad 需要 link，伪渐变

double tap ipad necessary for link with gradient on pseudo

double

tap

hyperlink

ipad