0
特定のdivにホバリングすると体の背景を変えるこのスクリプトを持っています。私は、マウスが身体の上にあるが2秒後であれば、元の色に戻したい。divにホバリングしていない場合、体色を白に戻します
$("#attacker").hover(function() {
$('body').css({"background":"url(img/4178903.jpg)",'background-repeat': 'no-repeat', 'background-size':'cover','background-attachment' : 'fixed','background-position':'center','transition': 'background-image 0.8s ease-in-out'});
});
$("#midfield").hover(function() {
$('body').css({"background-image":"url(img/david-villa-football-players-hd-wallpaper-876271979.jpg)",'background-repeat': 'no-repeat', 'background-size':'cover','background-attachment' : 'fixed','background-position':'center','transition': 'background-image 0.8s ease-in-out'});
});
$("#defender").hover(function() {
$('body').css({"background":"url(img/Cristiano_Ronaldo_and_Gennaro_Gattuso_Football_Player_Wallpaper.jpg)",'background-repeat': 'no-repeat', 'background-size':'cover','background-attachment' : 'fixed','background-position':'center','transition': 'background-image 0.8s ease-in-out'});
});*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body {
\t background: #fbc73b;
\t font-family: 'Lato', Arial, sans-serif;
\t color: #fff;
}
.wrapper {
\t margin: 0 auto 100px auto;
\t max-width: 960px;
}
.stage {
\t list-style: none;
\t padding: 0;
}
/*************************************
Build the scene and rotate on hover
**************************************/
.scene {
\t width: 260px;
\t height: 400px;
\t margin: 30px;
\t float: left;
\t -webkit-perspective: 1000px;
\t -moz-perspective: 1000px;
\t perspective: 1000px;
}
.movie {
\t width: 260px;
\t height: 400px;
\t -webkit-transform-style: preserve-3d;
\t -moz-transform-style: preserve-3d;
\t transform-style: preserve-3d;
\t -webkit-transform: translateZ(-130px);
\t -moz-transform: translateZ(-130px);
\t transform: translateZ(-130px);
\t -webkit-transition: -webkit-transform 350ms;
\t -moz-transition: -moz-transform 350ms;
\t transition: transform 350ms;
}
.movie:hover {
\t -webkit-transform: rotateY(-78deg) translateZ(20px);
\t -moz-transform: rotateY(-78deg) translateZ(20px);
\t transform: rotateY(-78deg) translateZ(20px);
}
/*************************************
Transform and style the two planes
**************************************/
.movie .poster,
.movie .info {
\t position: absolute;
\t width: 260px;
\t height: 400px;
\t background-color: #fff;
\t -webkit-backface-visibility: hidden;
\t -moz-backface-visibility: hidden;
\t backface-visibility: hidden;
}
.movie .poster {
\t -webkit-transform: translateZ(130px);
\t -moz-transform: translateZ(130px);
\t transform: translateZ(130px);
\t background-size: cover;
\t background-repeat: no-repeat;
}
.movie .info {
\t -webkit-transform: rotateY(90deg) translateZ(130px);
\t -moz-transform: rotateY(90deg) translateZ(130px);
\t transform: rotateY(90deg) translateZ(130px);
\t border: 1px solid #B8B5B5;
\t font-size: 0.75em;
}
/*************************************
Shadow beneath the 3D object
**************************************/
.csstransforms3d .movie::after {
\t content: '';
\t width: 260px;
\t height: 260px;
\t position: absolute;
\t bottom: 0;
\t box-shadow: 0 30px 50px rgba(0,0,0,0.3);
\t -webkit-transform-origin: 100% 100%;
\t -moz-transform-origin: 100% 100%;
\t transform-origin: 100% 100%;
\t -webkit-transform: rotateX(90deg) translateY(130px);
\t -moz-transform: rotateX(90deg) translateY(130px);
\t transform: rotateX(90deg) translateY(130px);
\t -webkit-transition: box-shadow 350ms;
\t -moz-transition: box-shadow 350ms;
\t transition: box-shadow 350ms;
}
.csstransforms3d .movie:hover::after {
\t box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}
/*************************************
Movie information
**************************************/
.info header {
\t color: #FFF;
\t padding: 7px 10px;
\t font-weight: bold;
\t height: 195px;
\t background-size: contain;
\t background-repeat: no-repeat;
\t text-shadow: 0px 1px 1px rgba(0,0,0,1);
}
.info header h1 {
\t margin: 0 0 2px;
\t font-size: 1.4em;
}
.info header .rating {
\t border: 1px solid #FFF;
\t padding: 0px 3px;
}
.info p {
\t padding: 1.2em 1.4em;
\t margin: 2px 0 0;
\t font-weight: 700;
\t color: #666;
\t line-height: 1.4em;
\t border-top: 10px solid #555;
}
/*************************************
Generate "lighting" using box shadows
**************************************/
.movie .poster,
.movie .info,
.movie .info header {
\t -webkit-transition: box-shadow 350ms;
\t -moz-transition: box-shadow 350ms;
\t transition: box-shadow 350ms;
}
.csstransforms3d .movie .poster {
\t box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}
.csstransforms3d .movie:hover .poster {
\t box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}
.csstransforms3d .movie .info,
.csstransforms3d .movie .info header {
\t box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}
.csstransforms3d .movie:hover .info,
.csstransforms3d .movie:hover .info header {
\t box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}
/*************************************
Posters and still images
**************************************/
.scene:nth-child(1) .movie .poster {
background-image: url(../img/poster01.jpg);
}
.scene:nth-child(2) .poster {
background-image: url(../img/poster02.jpg);
}
.scene:nth-child(3) .poster {
background-image: url(../img/poster03.jpg);
}
.scene:nth-child(1) .info header {
\t background-image: url(../img/still01.jpg);
}
.scene:nth-child(2) .info header {
\t background-image: url(../img/still02.jpg);
}
.scene:nth-child(3) .info header {
\t background-image: url(../img/still03.jpg);
}
/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster,
.no-csstransforms3d .movie .info {
\t position: relative;
}
/*************************************
Media Queries
**************************************/
@media screen and (max-width: 60.75em){
\t .scene {
\t \t float: none;
\t \t margin: 30px auto 60px;
\t }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
\t
\t \t \t
\t \t \t <div class="wrapper">
\t \t \t \t <ul class="stage clearfix" >
\t \t \t \t \t <li class="scene">
\t \t \t \t \t \t <div class="movie i1" onclick="return true" id="attacker">
\t \t \t \t \t \t \t <div class="poster"></div>
\t \t \t \t \t \t \t <div class="info">
\t \t \t \t \t \t \t \t <header>
\t \t \t \t \t \t \t \t \t <h1>THE ATTACKER</h1>
\t \t \t \t \t \t \t \t \t <span class="year">1946</span>
\t \t \t \t \t \t \t \t \t <span class="rating">GAME TIME</span>
\t \t \t \t \t \t \t \t \t <span class="duration">90 minutes</span>
\t \t \t \t \t \t \t \t </header>
\t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with Clarence.
\t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </li>
\t \t \t \t \t <li class="scene">
\t \t \t \t \t \t <div class="movie i2" onclick="return true" id="midfield">
\t \t \t \t \t \t \t <div class="poster"></div>
\t \t \t \t \t \t \t <div class="info">
\t \t \t \t \t \t \t \t <header>
\t \t \t \t \t \t \t \t \t <h1>THE MID-FIELDER</h1>
\t \t \t \t \t \t \t \t \t <span class="year">1951</span>
\t \t \t \t \t \t \t \t \t <span class="rating">GAME TIME</span>
\t \t \t \t \t \t \t \t \t <span class="duration">90 minutes</span>
\t \t \t \t \t \t \t \t </header>
\t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t A cattle baron takes in an orphaned boy and raises him, causing his own son to resent the boy. As they get older the resentment festers into hatred, and eventually the real son frames his stepbrother for fathering an illegitimate child that is actually his, seeing it as an opportunity to get his half-brother out of the way so he can have his father's empire all to himself.
\t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </li>
\t \t \t \t \t <li class="scene">
\t \t \t \t \t \t <div class="movie i3" onclick="return true" id="defender">
\t \t \t \t \t \t \t <div class="poster"></div>
\t \t \t \t \t \t \t <div class="info">
\t \t \t \t \t \t \t \t <header>
\t \t \t \t \t \t \t \t \t <h1>The DEFENFER</h1>
\t \t \t \t \t \t \t \t \t <span class="year">1925</span>
\t \t \t \t \t \t \t \t \t <span class="rating">GAME TIME</span>
\t \t \t \t \t \t \t \t \t <span class="duration">90 minutes</span>
\t \t \t \t \t \t \t \t </header>
\t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
\t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </li>
<li class="scene">
\t \t \t \t \t \t <div class="movie i4" onclick="return true" id="goalkeeper">
\t \t \t \t \t \t \t <div class="poster"></div>
\t \t \t \t \t \t \t <div class="info">
\t \t \t \t \t \t \t \t <header>
\t \t \t \t \t \t \t \t \t <h1>The GOALKEEPER</h1>
\t \t \t \t \t \t \t \t \t <span class="year">1925</span>
\t \t \t \t \t \t \t \t \t <span class="rating">GAME TIME</span>
\t \t \t \t \t \t \t \t \t <span class="duration">90 minutes</span>
\t \t \t \t \t \t \t \t </header>
\t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
\t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </div><!-- /wrapper -->
\t \t </div><!-- /container -->ホバー上のdivはとても少ないネクタイを、それを反転させた財産の後、背景、したがって、この手法を変更することがありましたので、私は体にIDを与えてみましたが、それは動作しません。ちょうどTHIのような
簡単にするためにここにあなたのHTMLを投稿してください。 –
あなたのHTMLを書いて、あなたのJSを簡単な読書のために書いてください:) – Ayan
html jsとcss @AKA –