Home/ Questions/Q 9177507
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:20:31+00:00

I am trying the following code but I am not seeing any kind of

  • 0

I am trying the following code but I am not seeing any kind of transition.

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

Did I mess something up or is this type of transition not supported? The hover is working correctly, I just don’t see any transition.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    RGBA backgrounds are supported by CSS3. You need to supply a background property for the initial state in order for it to change on the hover state.

    Here’s the code you need:

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

    }

    and a fiddle with it working in case you need it: http://jsfiddle.net/TAMA2/

    • 0