由于 Javascript 悬停效果，链接在移动设备上不起作用

Question

在 my site I've used hover.css 上为我的导航链接添加悬停动画。出于某种原因，这导致链接无法在移动设备上点击。关于如何解决这个问题的任何想法？这是我的一些代码：这是我的 HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="sss.css">
<link rel="stylesheet" type="text/css" href="sss2.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

<script src="sss.min.js"></script>
<script>
jQuery(function($) {
$('.slider').sss();
});
</script>
<div class="links">
<center>

<h>&nbsp;Sophie Calhoun </h>&nbsp;&nbsp;
<a href="http://www.sophiecalhoun.com/" class="hvr-grow"> &nbsp;home&nbsp; </a>&nbsp; 
<a href="http://www.sophiecalhoun.com/design.html" class="hvr-grow"> &nbsp;design work&nbsp; </a>&nbsp; 
<!-- <a href="http://www.sophiecalhoun.com/illustration.html" > &nbsp;illustration </a><p> &nbsp;<p> --!>
<a href="http://www.sophiecalhoun.com/motion.html" class="hvr-grow"> &nbsp;motion graphics&nbsp; </a> &nbsp;
<a href="http://www.sophiecalhoun.com/interactive.html" class="hvr-grow"> &nbsp;interactive&nbsp; </a>&nbsp; 
<a href="http://www.sophiecalhoun.com/resume.html" class="hvr-grow"> &nbsp;resume&nbsp; </a>  &nbsp; &nbsp;</center></div></div>
<!--etc.--!>

这里是 CSS 修改 hvr-grow 属性:

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}

我想知道我是否可以在移动设备上禁用此效果或以某种方式使链接与该效果一起使用。谢谢！！

Answer 1

我现在无法在移动设备上测试你的 css，但如果你只是想禁用效果，你可以将 css 包装在媒体查询中，这样它仅用于较大的屏幕尺寸。

@media (min-width: 600px) {
    /* Your css here */
}

Answer 2

您可以尝试进行用户代理测试以检测移动浏览器。

查看此站点： http://detectmobilebrowsers.com/

或者做这样的事情：

if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
 $('.hvr-grow').removeClass('hvr-grow');
}

仅将 .hvr-grow 用于动画，这样您就不会遇到链接消失的问题，如下所示：

<a href="http://www.sophiecalhoun.com/" class="hvr-grow links"> &nbsp;home&nbsp; </a>&nbsp; 
<a href="http://www.sophiecalhoun.com/design.html" class="hvr-grow links"> &nbsp;design work&nbsp; </a>&nbsp; 

.links {
  display: inline-block;
  vertical-align: middle;
}

.hvr-grow {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}

祝你好运！

由于 Javascript 悬停效果，链接在移动设备上不起作用

Links don't work on mobile due to Javascript hover effects

html

javascript

css

mobile

jquery