WooCommerce产品图片悬停

时间:2015-12-09 06:05:52

标签: wordpress wordpress-plugin woocommerce wordpress-theming woothemes

我为布料店建立了一个自定义主题,我安装了插件Woo-commerce.But在商店页面上,当Hover Woo-commerce产品图片我需要立即购买按钮。

这是Woo-Commerce在我的自定义主题------

中的默认产品视图

enter image description here

但是当我悬停时,我想要这样------------

enter image description here

所以请帮帮我一个人?我在google.Thx上找不到任何方法

1 个答案:

答案 0 :(得分:0)

我试过这个css代码,但它确实有效。

.woocommerce ul.products li.product a {margin: 0;position: relative;}
.woocommerce ul.products li.product a img {max-width: 100%;display:
 block;position: relative;}
.woocommerce ul.products li.product{overflow: hidden;}
.woocommerce ul.products li.product .product_details {opacity: 0;
-webkit-transform: translateY(100%);-moz-transform: translateY(100%);
-ms-transform: translateY(100%);transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s,opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;position: absolute;
bottom: 0%;left: 0%;background: #eee;color: #000;width: 100%;padding: 5px;}
.woocommerce ul.products li.product:hover .product_details {opacity: 1;
-webkit-transform: translateY(0px);-moz-transform: translateY(0px);   
-ms-transform: translateY(0px);transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s,opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;}