Question

我试图让行星围绕太阳运行（就像我们的太阳系），但是当你将它们悬停在它们上面时会暂停。我尝试过使用ID和类但没有成功。这是我的代码（完成所有行星）：

＆＃13;

var divs = document.getElementsByClassName("planet");
    if(true == true) {
    	for(var i = 0; i < divs.length; i++){
    		divs.onmouseover = function() {mouseOver(i)}
    		divs.onmouseout = function() {mouseOut(i)}
    	}
    }
    function mouseOver(d) {
    	var orbitOver = document.getElementById(d.id + "-orbit");
    	orbitOver.style.animation-play-state = paused;
    }
    
    function mouseOut(d) {
    	var orbitOut = document.getElementById(d.id + "-orbit");
    	orbitOut.style.animation-play-state = running;
    }

＆＃13;

    #jupiter {
        position: absolute;
        top: 0;
        left: 50%;
        height: 50px;
        width: 50px;
        margin-left: -25px;
        margin-top: -25px;
        border-radius: 50%;
    	background: -moz-linear-gradient(top, #a39f68 1%, #e2e2e2 13%, #e2e2e2 13%, #96875e 28%, #ededed 44%, #96875e 59%, #96875e 59%, #a39f68 78%, #96875e 100%);
    	background: -webkit-linear-gradient(top, #a39f68 1%,#e2e2e2 13%,#e2e2e2 13%,#96875e 28%,#ededed 44%,#96875e 59%,#96875e 59%,#a39f68 78%,#96875e 100%);
    	background: linear-gradient(to bottom, #a39f68 1%,#e2e2e2 13%,#e2e2e2 13%,#96875e 28%,#ededed 44%,#96875e 59%,#96875e 59%,#a39f68 78%,#96875e 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a39f68', endColorstr='#96875e',GradientType=0 );
    }
    
    #jupiter-orbit {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 400px;
        margin-top: -200px;
        margin-left: -200px;
        border-width: 2px;
        border-style: dotted;
        border-color: white;
        border-radius: 50%;
        -webkit-animation: spin-right 26s linear infinite;
        -moz-animation: spin-right 26s linear infinite;
        -ms-animation: spin-right 26s linear infinite;
        -o-animation: spin-right 26s linear infinite;
        animation: spin-right 26s linear infinite;
    }
    
    @-webkit-keyframes spin-right {
      100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    
    @keyframes spin-right {
      100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

＆＃13;

<body>
      <script type="text/javascript" src="planethover.js"></script>
      <p class="einfo">
        (Not to scale)<br>
        By marloso2
      </p>
      <div id="sun"></div>
        <div id="jupiter-orbit">
          <div id="jupiter" class="planet"></div>
        </div>
    </body>

＆＃13;

Answer 1

当您使用javascript引用CSS属性时，通常会使用camel case。因此，名为background-color的样式属性变为backgroundColor。

此外，属性值本身通常需要是字符串，因此您需要引用它们。

考虑到这一点，将animation-play-state更改为animationPlayState，并将引号暂停/运行。

您可能还必须使用供应商前缀，例如：

function mouseOver(d) {
    var orbitOver = document.getElementById(d.id + "-orbit");
    orbitOver.style.webkitAnimationPlayState = 'paused';
}

function mouseOut(d) {
    var orbitOut = document.getElementById(d.id + "-orbit");
    orbitOut.style.webkitAnimationPlayState = 'running';
}

仔细检查后，您的代码会出现更多问题。

分配事件的for循环不正确，应该是这样的：

for(var i = 0; i < divs.length; i++){
    divs[i].onmouseover = function() {mouseOver(this)}
    divs[i].onmouseout = function() {mouseOut(this)}        
}

这里的工作版本： http://jsfiddle.net/dzb9ww83/

如何使用另一个id在javascript中引用div

1 个答案: