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

Question

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

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

问题是，您鼠标离开购物车图标和购物车div简历消失。我试着用css来调整它，但我只做了最坏的:S。

我的愿望是：

• 当您在购物车图标中悬停时，会出现Div购物车简历。(工作)
• 当你在手推车上盘旋时，闪光灯保持可见。(失败)

有任何想法来处理这个或类似的问题。你可以在下一个小提琴上看到我的结构。

主要的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

事实上，我在购物车上或菜单上看到，菜单是可见的。标题菜单图标的宽度为100%，高度为18 to，因此您可能希望增加图标的高度或将菜单移动到更接近图标的位置。

第二个选择是将悬停效果替换为onclick操作。类的名称"header-cart-toggle“提示我，您可能需要一个切换效果。