Add Display Cart on Hover

  • elliotmch

    (@elliotmch)


    5 years, 4 months ago

    Hi All,
    I’m in the process of creating a shop for my site. However, I would like to make the cart show on hover with some CSS. This is so that the user doesn’t have to click through to view the cart. As I’m not experienced with code, please could someone assist? The cart icon is in the top right on the following link:https://www.lindabguttering.com/shop-2

    Many thanks,

    Elliot

    • This topic was modified 5 years, 4 months ago by elliotmch.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Ian Sackofwits

    (@plantprogrammer)

    5 years, 4 months ago

    Hi, elliotmch, here is some CSS that you can use to display the cart icon only on hover.

    It uses the same transition values that you had set for your menu when a menu link is hovered over.

    Code:

    div.hfe-cart-menu-wrap-default:hover {
    transition: .4s;
    opacity: 1;
}

div.hfe-cart-menu-wrap-default {
    transition: .4s;
    opacity: 0;
}
    Thread Starter elliotmch

    (@elliotmch)

    5 years, 4 months ago

    Hi Ian, thanks for the response. I meant to say – I would like the contents of the cart to be visible when you hover. (please see https://images.app.goo.gl/CwbNp3XbS2CXTdMx8 for an example). Is this possible?

    Many thanks

    • This reply was modified 5 years, 4 months ago by elliotmch.
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Add Display Cart on Hover’ is closed to new replies.