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.