css - 使div悬停在CSS时保持可见(Make div keeps visible while hovering it css)

Question

I'm having a shopping cart icon and shopping cart div that works like this:

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

Cart icon hovering --> (show the cart div resume).

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

The problem is that you mouse leave the cart icon and the cart div resume disappears.

(问题是您将鼠标留在购物车图标上，购物车div简历消失了。)

I'm trying adjust this in css but I only make it worst :S

(我正在尝试在CSS中对此进行调整，但我只会使其更糟：S)

My desire result is that:

(我期望的结果是：)

• Div cart resume appears while you make hover in cart icon.

  (当您在购物车图标中悬停时，将显示Div购物车履历。)

  (WORK)

  (（工作）)

• Div cart resumen keeps visible while you make hover in cart resume div.(FAIL)

  (当您在购物车履历区中悬停时，div购物车履历将保持可见（失败）)

Any idea to work with this or some similar.

(任何与此或类似的想法。)

You can see my structure in the next fiddle.

(您可以在下一个小提琴中看到我的结构。)

Mainly css is this:

(主要是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/

(https://jsfiddle.net/z0hygw7w/)

  ask by Genaut translate from so

Answer 1

In fact, I see on hover on the cart or on the menu, the menu is visible.

(实际上，我在悬停在购物车上或菜单上看到菜单是可见的。)

header-menu-icons has width 100% and height 18px, so maybe you want to increase the height of the icon or move the menu closer to the icon.

(header-menu-icons的宽度为100％，高度为18px，因此您可能想增加图标的高度或将菜单移近图标。)

A second option would be to replace the hover effect with onclick action.

(第二种选择是用onclick动作代替悬停效果。)

The name of the class, " header-cart-toggle " suggest me that you may want a toggle effect.

(类的名称“ header-cart-toggle ”建议我可能需要切换效果。)