Question

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

小册子图标悬停 - ＆gt; （显示购物车div简历）。

问题是你的鼠标离开了购物车图标，购物车div恢复消失。我试着在css中调整它，但我只是做得最差：S

我的愿望结果是：

当您将鼠标悬停在购物车图标中时，会显示购物车简历。（WORK）
当你在购物车简历div中悬停时，Div cart resumen会保持可见。（FAIL）

任何想法与此或类似的工作。你可以在下一个小提琴中看到我的结构。

主要是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动作替换悬停效果。该课程的名称，＆＃34; header-cart-toggle＆＃34;建议我你可能想要一个切换效果。

使div保持不动，同时将其悬停在css上

1 个答案: