Question

我正在运行此代码，将鼠标悬停在另一个图像上，并且它有一个转换代码。奇怪的是，它不适用于FireFox，但适用于Opera和Google Chrome。我希望你能帮到我，这是我的第一篇文章。

CSS ：

.class1 {
    visibility: visible
}

.class2 {
    background: url(image2); 
    background-repeat: no-repeat; 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -o-transition:all .9s ease; height: 173px
}

.class1:hover .class2 {
    background: url(image1); 
    background-repeat: no-repeat; 
    -webkit-transition:all .7s ease; 
    -moz-transition:all .7s ease; 
    -o-transition:all .7s ease; height: 173px
}

HTML ：

<div class="class1" style="width: 280px; float:center">
    <p style="float:center" class="class2">
    </p>
</div>

似乎不适用于Firefox。图像在那里，转换工作，在Firefox上它工作很奇怪，你将鼠标悬停在它上面它没有过渡，只是直接改变图像。

Answer 1

如果您使用带有供应商前缀的css3，您还需要添加实际的css3等效项，而不仅仅是前缀，它们在采用标准时是一个停止差距。

最新的Firefox已经采用css3作为标准（没有前缀，也没有支持它们），但前缀仍然支持旧版本，因此使用它们并没有错，但它们只是后退。

<style type="text/css" media="screen">
.class1 {visibility: visible}
.class2 {
    background: red; 
    background-repeat: no-repeat; 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -o-transition:all .9s ease; 
    transition:all .9s ease; 
    height: 173px}
.class1:hover .class2 {
    background:yellow; 
    background-repeat: no-repeat; 
    -webkit-transition:all .7s ease; 
    -moz-transition:all .7s ease; 
    -o-transition:all .7s ease; 
    transition:all .7s ease; 
    height: 173px
    }
</style>

<div class="class1" style="width: 280px; float:left;"><p style="float:center<class="class2">HJKHKSF</p></div>

我把图像拿出来并使用了颜色。

没有进一步的评论：经过一番研究后，火狐似乎不支持背景图像上的过渡动画

转换不适用于Firefox

1 个答案: