由于Java悬停效果，链接在移动设备上不起作用
[英]Links don't work on mobile due to Javascript hover effects
问题描述
在我的网站上，我使用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> 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.--!>
这是修改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);
}
我想知道是否可以在移动设备上禁用此效果，或者以某种方式使链接与该效果一起使用。 谢谢！！
2 个解决方案
解决方案1
0 2015-04-02 14:58:25
我现在无法在移动设备上测试CSS，但是如果您只是想禁用效果，则可以将CSS包装在媒体查询中，以便仅在更大的屏幕尺寸上使用。
@media (min-width: 600px) {
/* Your css here */
}
解决方案2
0 已采纳 2015-04-02 15:03:32
您可以尝试进行用户代理测试以检测移动浏览器。
查看此网站： 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"> 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);
}
祝好运！
ontouchstart onclick 和 eventlistener 不能在移动设备上工作，但可以播放 hover animation
[英]ontouchstart onclick and eventlistener don't work on mobile but play hover animation
为什么jQuery效果在我的手机上不起作用但在我的桌面上起作用
[英]Why jQuery effects don't work on my mobile but do work on my desktop
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.