css - 覆盖 css hover 让它什​​么都不做

Question

具体来说，我正在 Wordpress 中开发一个名为 twentytwelve 的 child 主题。

我想做的是将宽度更改为移动菜单的更大屏幕尺寸。

我遇到的问题是覆盖悬停，因此它什么都不做。

twentytwelve 有:

 @media screen and (min-width: 600px){

        .main-navigation ul li:hover > ul {
            display: block;
        }
}

我想要 ipad 上的移动菜单，所以我尝试了:

@media screen and (max-width: 768px){

        .main-navigation ul li:hover > ul {
            display: none;
        }
}

当然可以覆盖它，但是做的太多了。如果 .main-navigation ul li ul 可见怎么办。当 .main-navigation ul li:hover 它消失了。

我需要它实际上什么都不做，而不是隐藏它...

Answer 1

首先，只有当屏幕达到 601 和 767 像素之间的宽度时，才会触发您的第二个媒体查询。

其次，如果你想为其中一个媒体查询建立优先级，你可以使用 !important 声明——我可以说这是我的常用做法。 Learn more.

---

根据评论进行编辑。

尝试以下操作:

@media screen (min-width: 601px) and (max-width: 768px){
    .main-navigation ul li:hover > ul {
        display: none;
    }
}