CODEWITHSUNDEEP
htmlcss
chander shekhar
chander shekhar

Reputation: 425

Link is not working on first click in iPhone

I created a link that uses css pseudo classes. As seen in css (:before). Everything is fine in an Andriod device but in iPhone it's working on the second click Why...? if there is any solution please help me.

.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>

Upvotes: 2

Views: 851

Answers (1)

Lime
Lime

Reputation: 13569

Add the following

<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>

Upvotes: 2

Related Questions