如果没有悬停在div上，请将车身颜色改回白色

时间：2017-08-19 12:15:44

标签： jquery css

我有这个脚本，当悬停在特定的div上时会改变正文背景。如果鼠标在身体上，但是在2s之后，我想将身体颜色改回原始颜色。

<div>
    <select class="select-option" onchange="myInputCalc()">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
</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 {
	background: #fbc73b;
	font-family: 'Lato', Arial, sans-serif;
	color: #fff;
}

.wrapper {
	margin: 0 auto 100px auto;
	max-width: 960px;
}

.stage {
	list-style: none;
	padding: 0;
}

/*************************************
Build the scene and rotate on hover
**************************************/

.scene {
	width: 260px;
	height: 400px;
	margin: 30px;
	float: left;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}

.movie {
	width: 260px;
	height: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(-130px);
	-moz-transform: translateZ(-130px);
	transform: translateZ(-130px);
	-webkit-transition: -webkit-transform 350ms;
	-moz-transition: -moz-transform 350ms;
	transition: transform 350ms;
}

.movie:hover {
	-webkit-transform: rotateY(-78deg) translateZ(20px);
	-moz-transform: rotateY(-78deg) translateZ(20px);
	transform: rotateY(-78deg) translateZ(20px);
}

/*************************************
Transform and style the two planes
**************************************/

.movie .poster, 
.movie .info {
	position: absolute;
	width: 260px;
	height: 400px;
	background-color: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.movie .poster  {
	-webkit-transform: translateZ(130px);
	-moz-transform: translateZ(130px);
	transform: translateZ(130px);
	background-size: cover;
	background-repeat: no-repeat;
}

.movie .info {
	-webkit-transform: rotateY(90deg) translateZ(130px);
	-moz-transform: rotateY(90deg) translateZ(130px);
	transform: rotateY(90deg) translateZ(130px);
	border: 1px solid #B8B5B5;
	font-size: 0.75em;
}

/*************************************
Shadow beneath the 3D object
**************************************/

.csstransforms3d .movie::after {
	content: '';
	width: 260px;
	height: 260px;
	position: absolute;
	bottom: 0;
	box-shadow: 0 30px 50px rgba(0,0,0,0.3);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	-webkit-transform: rotateX(90deg) translateY(130px);
	-moz-transform: rotateX(90deg) translateY(130px);
	transform: rotateX(90deg) translateY(130px);
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
}

.csstransforms3d .movie:hover::after {
	box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}

/*************************************
Movie information
**************************************/

.info header {
	color: #FFF;
	padding: 7px 10px;
	font-weight: bold;
	height: 195px;
	background-size: contain;
	background-repeat: no-repeat;
	text-shadow: 0px 1px 1px rgba(0,0,0,1);
}

.info header h1 {
	margin: 0 0 2px;
	font-size: 1.4em;
}

.info header .rating {
	border: 1px solid #FFF;
	padding: 0px 3px;
}

.info p {
	padding: 1.2em 1.4em;
	margin: 2px 0 0;
	font-weight: 700;
	color: #666;
	line-height: 1.4em;
	border-top: 10px solid #555;
}

/*************************************
Generate "lighting" using box shadows
**************************************/

.movie .poster,
.movie .info,
.movie .info header {
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
}

.csstransforms3d .movie .poster {
	box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}

.csstransforms3d .movie:hover .poster {
	box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}

.csstransforms3d .movie .info, 
.csstransforms3d .movie .info header {
	box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}

.csstransforms3d .movie:hover .info, 
.csstransforms3d .movie:hover .info header {
	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 {
	background-image: url(../img/still01.jpg);
}

.scene:nth-child(2) .info header {
	background-image: url(../img/still02.jpg);
}

.scene:nth-child(3) .info header {
	background-image: url(../img/still03.jpg);
}

/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster, 
.no-csstransforms3d .movie .info {
	position: relative;
}

/*************************************
Media Queries
**************************************/
@media screen and (max-width: 60.75em){
	.scene {
		float: none;
		margin: 30px auto 60px;
	}
}

我尝试给身体一个id，但这不起作用，因为悬停时div有一个翻转它的后属性所以更少的领带来改变背景，因此这种技术失败

2 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
$('div').addClass('body');

$('div').on('mouseenter',function(){
  $('div').addClass('hover');
  $('div').removeClass('body');
});


$('div').on('mouseleave',function(){
  $('div').addClass('body');
  $('div').removeClass('hover');
});
＆＃13; 
.body{
  background-color:#000;
  color:#fff;
}

.hover{
  background-color:#fff;
  color:#000;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">Body</div>
＆＃13;
＆＃13;
＆＃13;

就像这样。

答案 1 :(得分：0)

试试这样：

"dependencies": {
    "color": "^2.0.0",
    "geolib": "^2.0.22",
    "history": "^4.6.1",
    "immutability-helper": "^2.3.0",
    "react-google-maps": "^7.1.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "redux": "^3.7.2",
    "reselect": "^3.0.1"
  },
  "devDependencies": {
    "webpack": "^2.2.1",
    "radium": "^0.19.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "lodash": "^4.17.4",
    "jquery": "^3.2.1",
    "firebaseui": "^2.2.1",
    "awesome-typescript-loader": "^3.0.0-beta.19",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "react-container-query": "^0.8.1",
    "source-map-loader": "^0.1.6",
    "typescript": "^2.1.5",
    "webpack-dev-server": "^2.6.1"
  }

$(document).ready(function() {
    $(".mydiv").hover(
    function() {
        //mouse over
        $('body').css('background', '#000000');
    }, function() {
        //mouse out
       $('body').css('background', '#ffffff');
    });
});
.mydiv{
    background:#f0f;
}

相关问题
最新问题