在 header 中隐藏悬停在迷你购物车上

Question

背景： 很久以前，在手机和平板电脑视图中，我禁用了当您将鼠标悬停在 header 中的购物车上时显示的弹出式购物车预览，因为它不是 user-friendly 在小型设备上。现在我发现它报仇雪恨了。注意我不是编码员，对 wordpress 还是个新手。

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

如何提供帮助：请你能帮我解决这个问题，并阻止这个非常松软无用的弹出式购物车出现在手机和平板电脑上的购物车上

提前致谢

Answer 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;
}}

Answer 2

试试这个：

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

其中1200px是本站手机版的断点。

在 header 中隐藏悬停在迷你购物车上

Hiding hover over mini cart in header

css

wordpress

woocommerce

minicart