Question

我创建了一个使用css伪类的链接。如在css（：之前）中看到的那样。在Andriod设备上一切都很好，但在iPhone中，它在第二次点击时工作为什么......？如果有任何解决方案，请帮助我。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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>

在iPhone中首次点击链接无效

1 个答案: