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;
}
ROOT :
Did you try having the :hover CSS on the <li> instead, like this:\n\nli.product:hover .button {\n background-color: #fff;\n color: #333;\n}\n",
2020-03-17T19:02:13