Question

响应式页面hover和active的问题

我用css做了一个响应式页面，给daohangbtn做了两个hover和active效果，分别是大屏幕尺寸和小屏幕，但发现小于屏幕小于400px时，它们是同时生效的，即不是分别有不同的效果。
如何解决？谢谢。

.daohangbtn:hover,.daohangbtn:active{
color:#FF6C00;
border-bottom:2px solid #FF6C00;
}

@media only screen and (max-width: 400px) {
.daohangbtn:hover,.daohangbtn:active{
background:#A8D1FD;
}
}

Answer 1

你把第一个设置为在400px以上产生效果就行了