CSS hover not selected correctly based on media query-CodePudding

Ok so I have this very simple animation logic

.result{
animation: make 500ms both
/*My CSS*/
}

@media screen and (max-width: 540px){
                                .result{
                                    animation: make540 200ms both;
                                }
                                .result:hover{
                                    animation: explode540 200ms both
                                }
}

.result:hover {
animation: explode 500ms both
}

As one would expect, the make animation seems to be rendered flawlessly based on the media query. However, the hover logic, no matter what, is always the default one in the above case, i.e., the one without any media query.

Is this the intended behaviour? Or am I missing something?

CodePudding user response：

Just defined the .result:hover above the media query, so that if it sets it to the default value, it is changed upon the media query. I think CSS goes by order specified so that did the trick

.result{
animation: make 500ms both
/*My CSS*/
}

.result:hover {
animation: explode 500ms both
}

@media screen and (max-width: 540px){
                                .result{
                                    animation: make540 200ms both;
                                }
                                .result:hover{
                                    animation: explode540 200ms both
                                }
}

don't blame me if this was obvious. I am not a professional web developer. I am a professional Android Developer, I'm just building a private server so I'm tinkering with it.