将鼠标悬停在类上时更改 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 {

    background-color: #fff;

    color: #333;

}

Answer 2

请在您的 css 文件中添加以下 CSS：

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

}