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

当然会同时生效啦，因为你设置的border和background是两个不同的属性，不能互相覆盖呀~~~~

应该这样：

上面：

border-bottom:2px solid #FF6C00;
background:transparent; /*换成你自己想要的*/

下面：

border-bottom:0; /*换成你自己想要的*/
background:#A8D1FD;

总之要在不同media query条件下互相覆盖~