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

I have a problem when making a wordpress theme integrated with woocommerce like cannot show "add to cart" button when hovering a cursor in product box and only show when hovering a cursor to bottom in product box like GIF below:

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

How I can fix it?

UPDATED (Dec 11,2015):

Its my URL link: http://dev.galerigadget.com/shop/

Obviously your "add to cart" button is only displaying when you hover the lower part of the box. That indicates only the bottom area is linked. Your "a" element might need to be "display:block" so it covers the entire block inside the brown rule. Hard to tell without seeing the actual site. Can you post URL?

AFTER EXAMINING YOUR CODE, HERE IS WHAT IS HAPPENING

The add-to-cart link is there, even when not hovered.

You do not see it b/c the CSS includes:

color: transparent;
background-color: transparent;

I would remove those parameters so the button is visible in gray and white. Looks nice and tells the user where to click to purchase the item.

You still have the hover effect that changes the button color to brown, but now the user clearly sees where to put their cursor.

If you want the button 'hidden' until the box is hovered, and then turn brown when hovering the box, add this to your CSS:

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

Here is an example

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

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

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

}

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

Or If you want to use only CSS

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

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

</div>