在CSS3中不能在Firefox或Internet Explorer中工作

我正在创建一个小型企业页面。我有一个为我的导航按钮创建的背景图片。我希望它们在悬停在图像上时具有过渡效果。它适用于Chrome，但我无法弄清楚为什么我的代码无法在Firefox或Internet Explorer中运行。在CSS3中不能在Firefox或Internet Explorer中工作

.nav li a.active { 
    background-image: url('../images/02amainhover.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: center center; 
    width: 245px; 
    height: 74px; 
    left: 72px; 
    top: 432px; 
    position: fixed; 
    transition: all .8s ease-out; 
    -moz-transition: all .8s ease-out; 
} 
.nav li a.active:hover { 
    background-image: url('../images/03amainhover.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: center center; 
    width: 245px; 
    height: 74px; 
    left: 72px; 
    top: 432px; 
    position: fixed; 
    transition: all .8s ease-in; 
    -moz-transition: all .8s ease-in; 
}

来源

2016-08-12 Mars

几件事。首先是你的wayyyyy重复的代码太多了。网站假设使用相同的代码，直到你告诉它改变它，所以复制所有这些样式是毫无意义的。你只需要用你想转换的东西来更新它。这就是说，你不能转换背景图像。请参考转换样式的列表：

来源

2016-08-12 17:13:29

这让人有点更多，因为，我想这将解释为什么它不能正常工作！谢谢，我可以看到参考表对我非常有用。至于重复的代码部分，我认为这是很好的补充？之前有人曾经提到，有时浏览器需要重复代码才能获得更多规范，并且缺少重复代码有时可能会导致代码无法正常工作的问题？ – Mars

旧版浏览器（IE6）需要为'：hover'重复执行任何更改后的值。基本上它需要知道如何改变'：hover'以及如何改变。 – KnightHawk

如果人们还在为IE6编码，他们会做错事。 –

您可以制作两个图像，其位置为：绝对和不同z-索引。顶部的图像可以从1到0进行不透明度转换。它可以在所有浏览器中使用。

来源

2016-08-12 17:22:30

并且拒绝不透明可以给我以后的过渡看起来？因为我不想要任何幻想转换，只是一个简单的“全部”转换效果，所以我的图像在盘旋时从一个转换到另一个。 – Mars

是的，它会像你想要的那样工作。 –

正如@Chris Stanley指出的，你不能转换背景图像。

您有很多选项，具体取决于您的转换意图是什么样子。我没有看到这些图像。

可以使用filters
可以在单个图像文件（网格，顶部/底部，等等）结合起来的多个图像，然后使用背景定位“移动”（即刻）从一个到另一个。您可以将其与其他转换或过滤器结合使用以提供额外的效果。这是一个非常古老的技巧，您可以通过添加转场和过滤器来实现新的转变。

EDIT（后看到的图像）：新的代码可能是这样的：

.nav li a.active { 
    background-image: url('../images/02amainhover.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: center center; 
    width: 245px; 
    height: 74px; 
    left: 72px; 
    top: 432px; 
    position: fixed; 
    transition: all 0.8s ease-out; 

    box-shadow:0px 0px 2px 2px rgba(0,0,0,0.5); 

} 

.nav li a.active:hover { 

    filter: invert(100%); 
    transition: all 0.8s ease-in; 
}

（我不认为你需要的-moz-transition了无论是。）

来源

2016-08-12 17:37:44 KnightHawk

那么你的意思是，我可以添加转换代码或类似于过滤器的代码，效果会是一样的吗？ – Mars

可能不是“相同”，但你仍然可以做很多事情。我还没有看到过你的两张照片......有可能你可以创造出几乎完全相同的效果，但是如果你没有看到你想要做的事，我就说不出来。 – KnightHawk

我可以告诉你我的两个图像，我有他们的链接：这是我的主要图像：http://www.freewebs.com/aph-imvu/02amainhover.png这是我的第二个图像：http：// www.freewebs.com/aph-imvu/03amainhover.png – Mars

在CSS3中不能在Firefox或Internet Explorer中工作

回答

相关问题