3

我一生都无法弄清楚为什么转换属性在我的 CSS 中不起作用。这是代码：

#header #menu-top-nav ul li a {
    -webkit-transition: background-color 10s;
    -moz-transition: background-color 10s;
    -ms-transition: background-color 10s;
    -o-transition: background-color 10s;
    transition: background-color 10s;
}
#header #menu-top-nav ul li a:hover {
    background: #dddddd; /* Old browsers */
    background: -moz-linear-gradient(top,  #dddddd 0%, #d3d3d3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #dddddd 0%,#d3d3d3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
}

标签背景在悬停之前在a技术上是透明的（尽管ul它包含在其中具有背景渐变）。但即使我为a标签分配了背景颜色或渐变，过渡仍然不起作用。我尝试将转换代码放入a:hover样式中；我尝试将变量更改为background和更改但background-image没有成功。

我的 CSS 中有更多样式，但我一直在 Chrome 中调试，找不到任何冲突的罪魁祸首。我应该提一下，transition 属性在任何浏览器中都不起作用。

谁能帮我摆脱看似简单的果酱？

4

1 回答 1

2

渐变是背景图像而不是背景颜色。所以背景颜色的过渡不会对渐变产生影响。

目前还不支持背景图像的过渡。

于 2013-01-15T18:15:49.430 回答