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

Posted 2023-03-06

【中文标题】覆盖 css hover 让它什​​么都不做

【英文标题】：Override css hover so that it does nothing AT ALL

【发布时间】：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 消失。

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

【问题讨论】：

第一个代码尝试(min-width: 1024px)

你为什么不从媒体查询中删除display: none;...???所以它不会做任何你想做的事情

@SurjithSM 第一个代码在第二十二个主题中。这就是子主题的全部意义：不要编辑主题以免丢失更新中的更改。

@NoobEditor 那不会覆盖任何东西。由于悬停，我仍然需要它不显示。

【参考方案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。你的问题是合乎逻辑的。顺便说一句，我已经更新了我的答案，看看吧。