2013-01-24 10 views
5

Próbuję poniższy kod, ale nie widzę żadnego przejścia.Czy właściwość tła RGBA nie jest obsługiwana przez przejścia 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; 
} 

#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)"; 
} 

Czy coś zepsułem, czy ten typ przejścia nie jest obsługiwany? Zawieszanie działa poprawnie, po prostu nie widzę żadnego przejścia.

+1

[To działa na mnie] (http: // jsfiddle .net/sNyVq /). Na jakiej przeglądarce testujesz? IE9 i niższe nie obsługują przejść CSS. –

Odpowiedz

13

Tła RGBA są obsługiwane przez CSS3. Musisz podać właściwość tła dla stanu początkowego, aby mogła się zmienić w stanie wskazania.

Oto kod trzeba:

#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)"; 

}

i skrzypce z jego pracy w przypadku trzeba go: http://jsfiddle.net/TAMA2/

Powiązane problemy