由於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.