如何在woocommerce中悬停在产品包装盒后显示添加到购物车按钮？

Question

我在制作与woocommerce集成的wordpress主题时遇到问题，例如无法显示＆＃34;添加到购物车＆＃34;将光标悬停在产品框中时的按钮，仅在将光标悬停在产品框中的底部时显示，如下面的GIF所示：

woocommerce.css

.woocommerce ul.products li.product .button {
    margin: 1em 0 3px 0.3em;
}

.woocommerce a.button {
    /* font-size: 100%; */
    /* margin: 0; */
    /* line-height: 1; */
    /* cursor: pointer; */
    position: relative;
    font-family: inherit;
    text-decoration: none;
    overflow: visible;
    padding: 0.618em 1.75em;
    font-weight: 700;
    /* border-radius: 3px; */
    /* left: auto; */
    color: transparent;
    background-color: transparent;
    /* border: 0; */
    /* white-space: nowrap; */
    /* display: inline-block; */
    /* background-image: none; */
    /* box-shadow: none; */
    /* -webkit-box-shadow: none; */
    /* text-shadow: none; */
}

.woocommerce a.button:hover {
    background-color: #f37020;
    text-decoration: none;
    color: #fff;
    background-image: none;
}

.woocommerce ul.products li:hover {
    border: 3px solid;
    border-color: #f37020;
}

我该如何解决？

更新（2015年12月11日）：

我的网址链接：http://dev.galerigadget.com/shop/

Answer 1

显然你的＆＃34;加入购物车＆＃34;按钮仅在您将鼠标悬停在盒子的下半部分时显示。这表明只有底部区域相关联。你的＆＃34; a＆＃34;元素可能需要＆＃34;显示：块＆＃34;所以它覆盖了棕色规则内的整个区块。很难说没有看到实际的网站。你可以发布网址吗？

在检查您的代码之后，这就是发生的事情

即使没有悬停，也可以使用添加到购物车的链接。

你没有看到它包括CSS：

color: transparent;
background-color: transparent;

我会删除这些参数，以便按钮以灰色和白色显示。看起来不错，告诉用户点击购买商品的位置。

您仍然具有将按钮颜色更改为棕色的悬停效果，但现在用户可以清楚地看到放置光标的位置。

如果您想要隐藏按钮＆＃39;直到盒子悬停，然后在悬停盒子时变成棕色，将其添加到CSS：

li:hover a.add_to_cart_button {
    background-color: #f37020; 
    text-decoration: none;
    color: #fff;
    background-image: none;
}

Answer 2

这是一个例子

＆＃13;

＆＃13;

$(document).ready(function () {
    $(document).on('mouseenter', '.divbutton', function () {
        $(this).find(":button").show();
    }).on('mouseleave', '.divbutton', function () {
        $(this).find(":button").hide();
    });
});

＆＃13;

.divbutton {
    height: 140px;
    background: #0000ff;
    width:180px;
}

 button{
padding: 4px;
text-align: center;
margin-top: 109px;
margin-left: 7px;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divbutton" ">
   <button type="button" style="display: none;">ADD TO CART</button>
</div>

＆＃13;

＆＃13;

＆＃13;

或者如果您只想使用CSS

button {
  display: none; /* Hide button */
}

.divbutton:hover button {
   display: block; /* On :hover of div show button */
}