Question

我能够在JSFiddle中运行我的脚本，但是当我尝试在我的网站上的Chrome或IE11中运行时，没有对悬停的响应。有人有什么建议吗？我知道我在这里遗漏了一些明显的东西。

当我尝试在我的网站中运行时，它被保存为HTML网页，而CSS（现在）与HTML在同一文档中。

  #backgroundBox{
z-index:-1;
left:50%;
top:50%;
background-color:#cdcba9;
width:400px;
height:400px;
position:absolute;
margin-left:-200px;
margin-top:-200px;
}

#backgroundBox:hover div{
-webkit-animation-play-state:running; 
animation-play-state:running;}

.ball {
    z-index:1;
    border: 20px solid #356db4;
    border-top: 20px solid rgba(0,0,0,0);
    border-left: 20px solid rgba(0,0,0,0);
    border-radius: 400px;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    position:relative;
    top:-295px;
    left:-20px;
    -moz-animation: spin 3s infinite linear;
    -webkit-animation: spin 3s infinite linear;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

http://jsfiddle.net/g5zQ8/3/

感谢您的帮助！

Answer 1

尝试对页面源和Vorenus的页面源进行差异检查，或通过W3C验证程序运行页面源。我保存了它，即使没有使用正确的HTML5文档类型，它也可以在Chrome中本地运行。

Answer 2

当我将其翻译成独立文件时，这似乎工作正常，请参阅： http://www.saltcollective.com/stuff/bike.html

你是否有可能以某种方式加入HTML / CSS？

Answer 3

我将JSFiddle转换为单个文件（http://jsbin.com/fanesihi/1/edit）并且工作正常。

如果您将其实施到网站中，并且它不起作用，那么它是两件事之一：

1）执行不正确。也许某些CSS没有被复制或具有某种性质。

2）您网站中的其他CSS会覆盖动画CSS类。

为了真正调试问题，我需要看一个不起作用的例子。

作为旁注，请记住包含关键帧动画的非浏览器前缀版本。此外，关键帧块中的尾随分号会导致样式表中出现奇怪的错误（几天前就在这里看到了这个问题）...最好将它们删除：

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinoff {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

悬停在JSFiddle上恢复Webkit动画工作，但不能在我的网站上运行

3 个答案: