CSS 根据媒体查询未正确选择悬停

Question

好的，我有了这个非常简单的动画逻辑

.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
}

正如人们所预料的那样，make 动画似乎根据媒体查询完美呈现。但是hover的逻辑，不管怎样，上面的例子都是默认的，也就是没有media query的。

这是预期的行为吗？还是我遗漏了什么？

Answer 1

刚刚在媒体查询上面定义了.result:hover，所以如果它设置为默认值，它会在媒体查询时改变。我认为 CSS 按照指定的顺序进行，所以成功了

.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
                                }
}

如果这是显而易见的，请不要怪我。我不是专业的网络开发人员。我是一名专业的Android开发人员，我只是在构建一个私人服务器，所以我正在修补它。