由于Javascript悬停效果，链接在移动设备上不起作用
在上，我曾将悬停动画添加到导航链接中。出于某种原因，这导致链接无法在手机上点击。有没有办法解决这个问题？以下是我的一些代码： 这是我的HTML：由于Javascript悬停效果，链接在移动设备上不起作用,javascript,jquery,html,css,mobile,Javascript,Jquery,Html,Css,Mobile,在上，我曾将悬停动画添加到导航链接中。出于某种原因，这导致链接无法在手机上点击。有没有办法解决这个问题？以下是我的一些代码： 这是我的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.
<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.--!>
我想知道我是否可以在手机上禁用此效果，或者以某种方式使链接使用此效果。谢谢 我现在无法在移动设备上测试css，但如果您只是想禁用此效果，可以将css包装在媒体查询中，以便仅在较大屏幕上使用
@media (min-width: 600px) {
/* Your css here */
}
您可以尝试执行用户代理测试来检测移动浏览器 查看此网站： 或者像这样做：
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
$('.hvr-grow').removeClass('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);
}
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
$('.hvr-grow').removeClass('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);
}
祝你好运 是的，我试过这样做，但这只会使链接完全消失。@Ishyla对，只将用于转换的css放在媒体查询中。您的基本链接css应该在外部，以便始终使用。是的，我就是这么做的，但它仍然完全删除了链接-我想这与它们被分配了类这一事实有关。hvr在HTML中增长。谢谢-您有任何代码建议从元素中删除类吗？$'.hvr grow'.removeClasshvr grow；你把links类添加到a元素了吗？我还建议把脚本放在页面的末尾。并将其包装在$document.readyfunction{}中；以便在删除类之前加载dom。