0
現在、私のページには、jQueryのmouseoverイベントの束によって引き起こされるCSSフォーカス/ぼかしアニメーションがあります。 localhost上でページを開くと、アニメーションはデスクトップ上で正常に動作しますが、モバイルデバイス上では全く動作しません。jquery - モバイルデバイスでの.mouseover機能が常に動作しない
たとえば、私が要素をクリックすると、モバイルでアニメーションがうまく動作しますが、少し遅れているようです。マウスオーバー機能が起動され、モバイル上のクリックとして解釈されると思います。ここに私のcodepenプロジェクトです：http://codepen.io/lcraciun25/pen/GmKEpW
私はなぜcodepenでアニメーションが動作し、ローカルホストでは理解できません。私はjQueryの初心者です。どんな助けでも大歓迎です。
<!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ファイルです：
は、ここに私のindex.htmlファイルです
$(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');
});
'バインド（）'廃止され、あなたはもうそれを使うべきではありません。また
、デスクトップのためのあなたのコードは次のように、少しより堅牢になります。代わりに '.on'を使用してください。 – Ionut