将鼠标悬停在类上时更改 li 类的 CSS

Question

我想更改 li 类的 CSS，同时将鼠标悬停在类上。

我的网站是hoomi.nl。具体页面为： https: //hoomi.nl/producten/。

当有人将鼠标悬停在产品图像/产品框上方时，应该会弹出“meer informie”按钮。现在，仅当您将鼠标悬停在产品框的中心时，该按钮才会出现。我怎么能这么做呢？

我已经创建了自定义 css 来向上移动按钮并更改颜色，以使其在您不将鼠标悬停在其上时不可见，而当您将鼠标悬停在其上时，背景和文本将获得颜色，以便您可以看到它。

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;

}

Answer 1

您是否尝试过使用:hoverCSS <li>，如下所示：li.product:hover .button {&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; color: #333;}

Answer 2

请在您的 css 文件中添加以下 CSS：.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product:hover .button {&nbsp; &nbsp; display: block;}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button {&nbsp; &nbsp; display: none;}