我无法在悬停时暂停多个动画。
我已经包含了以下代码的相关部分（不是整个因素，因为它太长了）。该作品的主要2个动画是.orbit和.pos类。当我应用动画播放状态属性时，它只会暂停.orbit类（轨道）中的动画而不是.pos类（反转）中的动画。
如何在悬停时暂停所有内容？
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title dir="ltr">WK 3D CSS Solar System</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
margin: 0;
padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: none; }
table {
-moz-border-collapse: collapse;
-webkit-border-collapse: collapse;
-o-border-collapse: collapse;
-ms-border-collapse: collapse;
border-collapse: collapse;
-moz-border-spacing: 0;
-webkit-border-spacing: 0;
-o-border-spacing: 0;
-ms-border-spacing: 0;
border-spacing: 0; }
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; }
body {
font-size: 10px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
width: 1500px;
height: 600px;
background-color: transparent;
}
#universe {
z-index: 1;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background-position: center 40%;
background-repeat: no-repeat;
background-size: cover; }
#mercury:hover, #venus:hover, #jupiter:hover, #saturn:hover, #uranus:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
#galaxy {
position: relative;
width: 100%;
height: 100%;
/*perspective: 4000;*/ }
#solar-system {
position: absolute;
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; }
.orbit {
position: absolute;
top: 37%;
left: 48%;
border: 0px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-animation-name: orbit;
-webkit-animation-name: orbit;
-o-animation-name: orbit;
-ms-animation-name: orbit;
animation-name: orbit;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear; }
.orbit .orbit {
-moz-animation-name: suborbit;
-webkit-animation-name: suborbit;
-o-animation-name: suborbit;
-ms-animation-name: suborbit;
animation-name: suborbit; }
.pos {
position: absolute;
top: 50%;
width: 6em;
height: 6em;
margin-top: -1em;
margin-left: -1em;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-animation-name: invert;
-webkit-animation-name: invert;
-o-animation-name: invert;
-ms-animation-name: invert;
animation-name: invert;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear; }
#sun{
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 219px;
margin-top: -120px;
margin-left: -120px;
border-radius: 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; }
.planet {
position: absolute;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
margin-top: -0.5em;
margin-left: -0.5em;
border-radius: 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; }
#earth .moon {
position: absolute;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
margin-top: -0.5em;
margin-left: -0.5em;
border-radius: 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; }
#sun {
background-color: rgba(153, 211, 237, 0.4);
background-image:url('https://dl.dropboxusercontent.com/u/236154657/Popup_Circle_New3.png');
background-repeat: no-repeat;
background-position:center;
background-size: cover;
-moz-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);
-webkit-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);
-o-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);
-ms-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);
box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4); }
.planet {
background-color: #202020;
background-repeat: no-repeat;
background-size: cover;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear; }
/* --------------------------------------------------------------------------- animations */
@-webkit-keyframes orbit {
0% {
-webkit-transform: rotateZ(0deg); }
100% {
-webkit-transform: rotateZ(-360deg); } }
@-moz-keyframes orbit {
0% {
-moz-transform: rotateZ(0deg); }
100% {
-moz-transform: rotateZ(-360deg); } }
@keyframes orbit {
0% {
transform: rotateZ(0deg); }
100% {
transform: rotateZ(-360deg); } }
@-webkit-keyframes suborbit {
0% {
-webkit-transform: rotateX(90deg) rotateZ(0deg); }
100% {
-webkit-transform: rotateX(90deg) rotateZ(-360deg); } }
@-moz-keyframes suborbit {
0% {
-moz-transform: rotateX(90deg) rotateZ(0deg); }
100% {
-moz-transform: rotateX(90deg) rotateZ(-360deg); } }
@keyframes suborbit {
0% {
transform: rotateX(90deg) rotateZ(0deg); }
100% {
transform: rotateX(90deg) rotateZ(-360deg); } }
@-webkit-keyframes invert {
0% {
-webkit-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
@-moz-keyframes invert {
0% {
-moz-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
-moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
@keyframes invert {
0% {
transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
</style>
</head>
<body class="opening hide-UI view-3D zoom-large data-open controls-close">
<div id="universe" class="scale-stretched">
<div id="galaxy">
<div id="solar-system" class="Mercury">
<div id="venus" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="earth" class="orbit">
<div class="pos">
<div class="orbit">
<div class="pos">
<div class="moon"></div>
</div>
</div>
<div class="planet">
<dl class="infos">
<dt>test</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="mars" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>Mars</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="jupiter" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="saturn" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="uranus" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="neptune" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>Neptune</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="mercury" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="sun">
<dl class="infos">
<dt>Sun</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='http://secure.cart32.com/WarrenKahn/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script src="http://secure.cart32.com/WarrenKahn/prefixfree.min.js"></script>
<script src="http://secure.cart32.com/WarrenKahn/scripts.min.js"></script>
</body>
</html>