修复 -- 只需将光标:指针放在关键帧选择中即可解决问题。 -- -- 在代码中,修复在注释中,因此您可以区分过去和现在--
我有一个 html 格式的图像对象,我正在使用关键帧在圆形路径上设置动画。该图像具有 css cursor:pointer
样式和 onclick:"document.location='a url';return false;"'
功能。在 Firefox 和 IE 中,图像沿其路径进行动画处理,并在将鼠标悬停在其上时保持其光标样式和点击功能。但是,在 Chrome 中,我失去了指针和点击功能。我无法单击图像以定向到 onclick
中的 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;*/ }
}
最佳答案
修复:只需将 cursor:pointer;
放在关键帧选择中即可解决问题。
-- 在代码中,修复在注释中,因此您可以区分过去和现在 --
关于html - 为什么我在使用 css 中的关键帧设置动画时会丢失光标样式和 onclick 功能(仅在 Google Chrome 中)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18295705/