覆盖 css hover 让它什么都不做答案

【问题标题】：Override css hover so that it does nothing AT ALL覆盖 css hover 让它什么都不做
【发布时间】：2014-02-19 17:06:57
【问题描述】：

具体来说，我正在 Wordpress 中处理一个 211 的子主题。

我正在尝试将移动菜单的宽度更改为更大的屏幕尺寸。

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

二十十二个有：

 @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 消失。

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

【问题讨论】：

【解决方案1】：

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

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

根据评论编辑。

尝试以下方法：

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

【讨论】：

第一：这就是重点。悬停在 600px 以下的 212 中未实现。我想把它移到 768px。这就是为什么我把 max-width:768px 我只需要在这两个数字之间触发它。
第二：当然，当我想显示它时，我使用 !important 让它工作，保持上面的代码相同。但是我不喜欢使用 !important 如果我不需要的话。它打败了整个级联的想法。
实际上，!important 声明就是为此而生的，Joshua。你的问题是合乎逻辑的。顺便说一句，我已经更新了我的答案，看看吧。