将鼠标悬停在标题中的迷你购物车上答案

【问题标题】：Hiding hover over mini cart in header将鼠标悬停在标题中的迷你购物车上
【发布时间】：2020-12-12 19:36:58
【问题描述】：

背景： 很久以前，在移动设备和平板电脑视图中，当您将鼠标悬停在标题中的购物车上时，我禁用了弹出式购物车预览，因为它在小型设备上对用户不友好。现在我发现它回来报仇了。请注意，我不是程序员，对 wordpress 很陌生。

我尝试过的：我已经尝试了所有我能想到的检查和 'display:none-ing 无济于事。我认为它被称为 .o-mini-cart 并且当我查看代码时可以看到它上面和周围有一个“display:none”，但它被划掉了，好像没有激活一样。根据我在网上阅读的内容，这可能意味着其他地方正在覆盖它但我尝试了 !important 技巧，但无济于事，找不到覆盖它的东西，即使我可以，我也不知道如何阻止它。

您如何提供帮助：请您帮我解决这个问题，并阻止这个可怕的、无用的弹出式购物车出现在移动设备和平板电脑上的购物车上

提前致谢

【问题讨论】：

标签： css wordpress woocommerce minicart

【解决方案1】：

您可以通过将此 css 添加到自定义 CSS 来隐藏迷你购物车“弹出窗口”：

@media only screen and (max-width: 767px) {
    body .elementor-21767 .elementor-element.elementor-element-b1cb531 .l-primary-header__bag:hover .o-mini-cart {
        display: none!important;
}}

【讨论】：

【解决方案2】：

试试这个：

@media only screen and (max-width: 1200px) {
    .l-primary-header__bag:hover .o-mini-cart {
        display:none!important;
    }
}

其中 1200px 是网站移动版的断点。

【讨论】：

嗨@thomas liberato，我想这就是我以前所拥有的。不幸的是它现在不起作用:(
它不起作用，因为其他规则覆盖了这个 css。