html - 在 iPhone 中首次点击时链接不起作用

Question

我创建了一个使用 css 伪类的链接。如 css (:before) 中所示。在 Andriod 设备中一切正常，但在 iPhone 中第二次单击时就可以工作了，为什么...？如果有任何解决方案请帮助我。

.link{float:left;}
.link a {
    color: #000;
    font-size: 15px;
    font-weight: 400;
    padding: 10px;
    display: inline-block;
    border: 1px solid #b6fe54;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    position: relative;
}
.link a:before {
    position: absolute;
    content: "";
    width: 0px;
    background: #b6fe54;
    left: 0px;
    top: 0px;
    height: 100%;
    z-index: -1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.link a:hover:before {
    width: 100%;
}

<div class="link"><a href="https://www.google.co.in" target="_blank">Learn More</a></div>

Answer 1

添加以下内容

<script>
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(!iOS)
  document.write('\x3Cstyle>.link a:hover:before {width: 100%;}\x3C/style>');
</script>