Question

在my site我已使用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.--!>

这是修改hvr-grow属性的CSS：

.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包装在媒体查询中，以便仅在较大的屏幕尺寸上使用。 / p>

@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悬停效果，链接无法在移动设备上运行

2 个答案: