Thuộc tính nền RGBA không được hỗ trợ bởi CSS3 Transitions?

Question

Tôi đang thử mã sau nhưng tôi không thấy bất kỳ loại chuyển đổi nào.

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

Tôi đã gây rối điều gì đó hoặc kiểu chuyển đổi này không được hỗ trợ? Di chuột đang hoạt động chính xác, tôi không thấy bất kỳ chuyển đổi nào.

Answer 1

Nền RGBA được hỗ trợ bởi CSS3. Bạn cần cung cấp thuộc tính nền cho trạng thái ban đầu để nó thay đổi trên trạng thái di chuột.

Dưới đây là đoạn code mà bạn cần:

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

}

và fiddle với nó làm việc trong trường hợp bạn cần nó: http://jsfiddle.net/TAMA2/