jquery -.mouseover function 并不总是适用于移动设备
[英]jquery - .mouseover function doesn't always work on mobile device
问题描述
我目前在我的页面上有一个 css 焦点/模糊 animation，这是由 jQuery 中的一堆鼠标悬停事件触发的。 在本地主机上打开页面时，animation 在桌面上工作正常，但在我的移动设备上它根本不起作用。
例如，在 codepen 中，当我单击元素时，animation 在移动设备上运行良好，尽管它似乎有一点延迟。 我猜鼠标悬停 function 被触发并解释为移动设备上的点击。 这是我的代码笔项目： http://codepen.io/lcraciun25/pen/GmKEpW
我无法弄清楚为什么在 codepen 中 animation 有效而在 localhost 上无效。 我是 jQuery 的初学者，非常感谢任何帮助。
这是我的 index.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>Coming Soon Page</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500,200);
html, body {
height: 100%;
}
body {
background-color: rgba(0, 0, 0, 0.9);
text-align: center;
}
.bg {
position:fixed;
top:0;
height: 100%;
width:100%;
background-image: url(http://shrani.si/f/3A/JY/3mEc61r0/vr4v2bqroc.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
transform: scale(1.03);
z-index: 0;
filter: blur(8px);
-webkit-filter: blur(8px);
transition: all 4000ms;
}
.content {
display: table;
position:relative;
top:27%;
margin: 0 auto;
transition: all 4000ms;
z-index: 1;
}
.logo {
background: url(http://shrani.si/f/I/Ze/4Qj9jIQ9/logo.png);
background-size: cover;
z-index: 1;
width: 180px;
height: 180px;
margin: 0 auto;
}
.text {
font-family: Raleway;
color: #fff;
margin-top: 20px;
width: 100%;
max-width: 600px;
border-radius: 5px;
padding-bottom: 32px;
}
.text p:first-child {
font-size: 40px;
font-weight: 200;
}
.text p:nth-child(2) {
font-size: 20px;
font-weight: 100;
}
.social {
position:relative;
text-align: center;
bottom:-50%;
margin-bottom: 20px;
z-index:1;
transition: all 4000ms;
}
.social a {
font-family: Raleway;
color:white;
text-decoration:none;
margin-left:5px;
margin-right:5px;
}
.unblurPhoto {
filter: blur(0px);
-webkit-filter: blur(0px);
background-size: cover;
transform: scale(1.14);
}
.blurContent {
filter: blur(1.8px);
-webkit-filter: blur(1.8px);
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="content">
<div class="logo"></div>
<div class="text">
<p>This is the title</p>
<p>Welcome to my beautiful new website. You can find out more about me by scrolling or clicking a button.</p>
</div>
</div>
<div class="social">
<a href="#" target="_blank">UpLabs</a>
<a href="#" target="_blank">Behance</a>
<a href="#" target="_blank">Linkedin</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
这是我的 script.js 文件：
$(document).ready(function() {
$('.bg').mouseover(function() {
$(this).addClass('unblurPhoto');
$('.content').addClass('blurContent');
$('.social').addClass('blurContent');
});
$('.content').mouseover(function() {
$('.bg').removeClass('unblurPhoto');
$(this).removeClass('blurContent');
$('.social').removeClass('blurContent');
});
$('.content').mouseover(function() {
$('.bg').removeClass('unblurPhoto');
$('.content').removeClass('blurContent');
$(this).removeClass('blurContent');
});
});
我还寻找了一些解决方案，并尝试了这种方法，但它也不起作用：
$('.bg').bind('click touchstart', function() {
$(this).addClass('unblurPhoto');
});
2 个解决方案
解决方案1
1 2017-04-11 14:18:12
鼠标悬停仅在用户使用鼠标时起作用。 在移动设备中，用户使用触摸事件。 请检查OnMouseOver的此首选替代产品以进行触摸
解决方案2
0 已采纳 2017-04-11 14:55:38
bind()已被弃用，您不应再使用它。 使用.on代替，例如：
$('.bg').on('touchstart', function() {
$(this).addClass('unblurPhoto');
});
另外，您的台式机代码可能看起来更健壮，例如：
$('.content, .bg, .social').mouseover(function() {
$(this).toggleClass('unblurPhoto blurContent blurContent');
});
解决方案3
0 2022-08-14 00:33:54
你们很聪明。 我只是不明白为什么你不能创建插入桌面代码的代码，以便它在手机上使用时感知，特殊的鼠标悬停代码将生效。 如果屏幕向上或向下滚动，一个小鼠标会出现在屏幕的一角，而不是 go。 该人将用手指在图像上移动鼠标，这将创建鼠标悬停效果，该效果将调出任何 img alt="text" 以向图像添加文本。 使用简单的代码。 不要看中这个 css 或 jquery 废话，因为我们很多老前辈只是不使用它。
“ width = device-width”在移动浏览器上的固定大小的布局上并不总是有效吗？
[英]“width=device-width” doesn't always work on fixed sized layout on mobile safari?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.