7

我正在尝试以下代码，但没有看到任何类型的转换。

#menu .col_1 a{
    -webkit-transition: all .5s ease-out 0.1s;
    -moz-transition: all .5s ease-out 0.1s;
    -o-transition: all .5s ease-out 0.1s;
    transition: all .5s ease-out 0.1s;
}

#menu .col_1 a:hover{
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.5);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

是我搞砸了还是不支持这种类型的转换？悬停工作正常，我只是看不到任何过渡。

4

1 回答 1

14

CSS3 支持 RGBA 背景。您需要为初始状态提供背景属性，以便它在悬停状态下发生变化。

这是您需要的代码：

#menu .col_1 a {
-webkit-transition: all .5s ease-out 0.1s;
-moz-transition: all .5s ease-out 0.1s;
-o-transition: all .5s ease-out 0.1s;
transition: all .5s ease-out 0.1s;
background-color: rgba(0,0,0,1);
color: red;
}

#menu .col_1 a:hover {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.5);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

}

如果您需要它，可以使用它：http: //jsfiddle.net/TAMA2/

于 2013-01-24T21:39:49.620 回答