CODEWITHSUNDEEP
css
Genaut
Genaut

Reputation: 1850

Make div keeps visible while hovering it css

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

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

The problem is that you mouse leave the cart icon and the cart div resume disappears. I'm trying adjust this in css but I only make it worst :S

My desire result is that:

Any idea to work with this or some similar. You can see my structure in the next fiddle.

Mainly css is this:

.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/

Upvotes: 0

Views: 65

Answers (1)

Madalina Taina
Madalina Taina

Reputation: 1978

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.

A second option would be to replace the hover effect with onclick action. The name of the class, "header-cart-toggle" suggest me that you may want a toggle effect.

Upvotes: 1

Related Questions