1

修复 ——只需将光标：指针放在关键帧选择中即可解决问题。-- -- 在代码中，修复位于注释中，因此您可以区分过去是什么和现在是什么--

我在 html 中有一个图像对象，我正在使用关键帧在圆形路径上制作动画。该图像具有 csscursor:pointer样式和onclick:"document.location='a url';return false;"'功能。在 Firefox 和 IE 中，图像沿其路径动画并在悬停在其上时保持其光标样式和 onclick 功能。但是，在 Chrome 中，我失去了指针和点击功能。我无法单击图像以定向到其中的 url，onclick并且我也丢失了成为默认箭头的光标样式。当我取出动画代码时，指针和点击功能工作得很好。这里发生了什么以及我如何解决这个问题的任何建议？

的HTML：

<img id="imgId" onclick="document.location='a url';return false;" src="img.gif" width="30" height="30"/>

CSS

#imgId  
{            
       cursor:pointer;    
       position:absolute;  
       left:50%;  
       top:50%;  
       -webkit-animation: myOrbit 12s linear infinite; /* Chrome, Safari 5 */  
       -moz-animation: myOrbit 12s linear infinite; /* Firefox 5-15 */  
        -o-animation: myOrbit 12s linear infinite; /* Opera 12+ */  
       animation: myOrbit 12s linear infinite; /* Chrome, Firefox 16+, 
                                                  IE 10+, Safari 5 */

}

CCS 动画 - 位于上方

@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); /*cursor:pointer;*/}
    to   { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}

@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
    to   { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); /*cursor:pointer*/}
}

@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
    to   { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer*/ }
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}
4

1 回答 1

1

FIX：只需cursor:pointer;输入关键帧选择即可解决问题。-- 在代码中，修复位于注释中，因此您可以区分过去和现在 --

于 2013-08-18T19:45:31.283 回答