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

RGBA背景はCSS3でサポートされています。ホバー状態で変更するには、初期状態のバックグラウンドプロパティを指定する必要があります。

必要なコードは次のとおりです。

#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 に答える