css - 使 div 在悬停时保持可见 css

Question

我有一个购物车图标和购物车div，其工作方式如下:

购物车图标悬停 -->(显示购物车 div 简历)。

问题是您的鼠标离开购物车图标，购物车 div 恢复消失。我正在尝试在 css 中调整它，但我只会让它变得最糟糕 :S

我想要的结果是:

• 当您将鼠标悬停在购物车图标上时，会出现 Div 购物车简历。 (工作)
• 当您将鼠标悬停在 cart resume div 中时，div cart resumen 保持可见。(失败)

任何与这个或类似的东西一起工作的想法。您可以在下一个 fiddle 中看到我的结构。

主要是css是这样的:

.header-cart-toggle .widget_shopping_cart{
    visibility:hidden;
    opacity:0;
    position:absolute;
    margin:0;
    right:0;
    z-index: 1;
    background-color: #eeeeee;
    transition:visibility 0s ease 0s, opacity 0.5s ease;
    -webkit-transition:visibility 0s ease 0s, opacity 0.5s ease;
}
.header-cart-toggle:hover .widget_shopping_cart{
    visibility:visible;
    opacity:1;
    padding-bottom: 0;
    transition-delay:0s;
    -webkit-transition-delay:0s;
}

https://jsfiddle.net/z0hygw7w/

Answer 1

事实上，我看到悬停在购物车或菜单上时，菜单是可见的。 header-menu-icons 的宽度为 100%，高度为 18px，因此您可能想要增加图标的高度或将菜单移近图标。

第二个选项是用 onclick Action 替换悬停效果。类的名称“header-cart-toggle”表明您可能需要切换效果。