Mobile Hover

Hover effects on mobile browsers

by lesac4

HTML

<head>
<title>Hover effects on mobile browsers</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div class="services-list">
<i class="fa fa-car"></i>
<i class="fa fa-user"></i>
<i class="fa fa-mobile"></i>
</div>
</body>

CSS

.services-list .fa {
    transition: 0.5s;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    color: blue;
}
/* For me, @media query is the easiest way for disabling hover on mobile devices */
@media only screen and (min-width: 981px) {
    .services-list .fa:hover {
        color: #faa152;
        transition: 0.5s;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/* You can actiate hover on mobile with :active */
.services-list .fa:active {
    color: #faa152;
    transition: 0.5s;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.services-list .fa-car {
  font-size:20px;
  margin-right:15px;
}
.services-list .fa-user {
  font-size:48px;
  margin-right:15px;
}
.services-list .fa-mobile {
  font-size:60px;
}