Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Change CSS of li class when hovering over a class

I want to change the CSS of a li class, while hovering over a class.

My website is hoomi.nl. The page specific is: https://hoomi.nl/producten/.

When someone hovers above the productimage/productbox, the button ‘meer informatie’ should pop up. Now that button only appears when you hover in the center of the productbox. How could I do that?

I already created custom css to move the button upwards and change the color to get it invisible when you don’t hover on it and when you hover on it, the background and text get color, so you can see it. 

li.product .button{
    font-weight: 300;
    font-size: 13px;
    color: #fff0;
    border-radius: 5px;
    background: #fff0;
    left: 50%;
    line-height: 1em;
    margin: 0;
    margin-left: -6em;
    margin-top: -2.5em;
    position: absolute;
    top: 50%;
    transition: opacity .4s cubic-bezier(.5,.25,0,1);
    width: 12em;
}

    li.product .button:hover {
    background-color: #fff;
    color: #333;
}
Tags:

2

Answers


  1. 0

    Did you try having the :hover CSS on the <li> instead, like this:

    li.product:hover .button {
    background-color: #fff;
    color: #333;
}
    Login or Signup to reply.
  2. 0

    Please add below CSS in your css file:

    .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product:hover .button {
    display: block;
}
.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button {
    display: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search