我为布料店 Build 了一个自定义主题,我安装了插件Woo-commerce.But在商店页面上,当Hover Woo-commerce产品图片我需要立即购买按钮 .
这是Woo-Commerce在我的自定义主题中的默认产品视图------
但我在悬停时想要这样------------
所以请帮帮我一个人?我在google.Thx上找不到任何方法
我尝试了这个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;}
1 回答
我尝试了这个css代码,它的工作原理 .