Transition of background-color without being triggered-CodePudding

I'm trying to make a background color transition, where element A's color will switch to another color on hover. But A's color is already switched without hovering on it.

.A
    {
        background-color: #1A1A1F;
    }
.A:hover
    {
        background-color: #424242;
        transition:  background-color,0.5s ;
        -o-transition: background-color, 0.5s ;
        -moz-transition:  background-color, 0.5s;
        -webkit-transition:  background-color, 0.5s;
         cursor: pointer;
    }

Here A's color should be #1A1A1F by default and switch to #424242 when you hover on it, but instead of being the default color, it's already changed without hovering on it.

CodePudding user response：

First of all, you should put the transition in the main selector in :hover selector, puting the transition in :hover will give you a different result.
Second, the transition should be defined like : transition: background-color 0.5s;, no comma in between. You should put the comma when you have different transitions like : transition: background-color .5s, width 1s;.
If you have multiple transitions and you want to give them the same transition duration you can use all or not give a property name like transition: all 1s; or transition: 1s;.
Anyways, your code should be like this:

.A{
    background-color:#1A1A1F;
    transition: background-color .5s;
}
.A:hover{
    background-color:#424242;
}