由于Java悬停效果，链接在移动设备上不起作用
[英]Links don't work on mobile due to Javascript hover effects
问题描述
On my site I've used hover.css to add a hover animation to my nav links. 
在我的网站上，我使用hover.css向我的导航链接添加了一个悬停动画。 For some reason, this is causing the links to not be clickable on mobile. 由于某些原因，这导致链接在移动设备上不可点击。 Any ideas on how to resolve this? 有关如何解决此问题的任何想法？ Here's some of my code: Here's my HTML: 这是我的一些代码：这是我的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> Sophie Calhoun </h>
<a href="http://www.sophiecalhoun.com/" class="hvr-grow"> home </a>
<a href="http://www.sophiecalhoun.com/design.html" class="hvr-grow"> design work </a>
<!-- <a href="http://www.sophiecalhoun.com/illustration.html" > illustration </a><p> <p> --!>
<a href="http://www.sophiecalhoun.com/motion.html" class="hvr-grow"> motion graphics </a>
<a href="http://www.sophiecalhoun.com/interactive.html" class="hvr-grow"> interactive </a>
<a href="http://www.sophiecalhoun.com/resume.html" class="hvr-grow"> resume </a> </center></div></div>
<!--etc.--!>
And here's the CSS modifying the hvr-grow property: 这是修改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);
}
I'd like to know if I can disable this effect on mobile or somehow make the links work with the effect. 我想知道是否可以在移动设备上禁用此效果，或者以某种方式使链接与该效果一起使用。 Thanks!! 谢谢！！
2 个解决方案
解决方案1
0 2015-04-02 14:58:25
I'm not able to test your css on a mobile device right now, but if you just wanted to disable the effect, you could wrap the css in a media query so that it is only used on larger screen sizes. 我现在无法在移动设备上测试CSS，但是如果您只是想禁用效果，则可以将CSS包装在媒体查询中，以便仅在更大的屏幕尺寸上使用。
@media (min-width: 600px) {
/* Your css here */
}
解决方案2
0 已采纳 2015-04-02 15:03:32
You can try doing a user agent test to detect mobile browsers. 您可以尝试进行用户代理测试以检测移动浏览器。
Check out this site: http://detectmobilebrowsers.com/ 查看此网站： http : //detectmobilebrowsers.com/
Or do something like this: 或执行以下操作：
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
$('.hvr-grow').removeClass('hvr-grow');
}
Use .hvr-grow only for animations so you don't have the issue with the links dissappearing, like this: 仅将.hvr-grow用于动画，这样就不会出现链接消失的问题，如下所示：
<a href="http://www.sophiecalhoun.com/" class="hvr-grow links"> home </a>
<a href="http://www.sophiecalhoun.com/design.html" class="hvr-grow links"> design work </a>
.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);
}
good luck! 祝好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.