如何在img hover上显示购物车WP

-1

我的网站上有图像悬停的想法。目前，我的网站位于本地服务器上，因此我无法共享该链接。但我希望解释正确。如何在img hover上显示购物车WP

我使用二十三个主题，woocommerce插件和我的任务是使像素完美的自定义设计。所以，我从儿童主题创建和自定义CSS开始。

我的问题是添加到购物车按钮仅在产品图像悬停时可见。我的购物车当前的CSS是：

form.cart { 
margin-bottom: 0; 
position: absolute; 
top: 30px; 
margin: 0 auto; 
left: 0; 
right: 0; 
} 
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { 
background-color: transparent; 
color: #fff; 
border: 1px solid #fff; 
border-radius: 0; 
font-size: 12px; 
display: none; 
}

这里是需要的结果：

我无法修复只能在产品图像悬停它的知名度。

我可以覆盖所需的一切。谢谢你的帮助。

来源

2016-08-22 Oleg

可能重复[只使用CSS，显示div悬停在]（http://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over- a） – billynoah

不知道你的HTML，我不能保证这会工作的结构，但这样的：

.add-to-cart-button{ 
display: none; 
} 

.product-image:hover .add-to-cart-button{ 
display: block; 
}

如果你添加到购物车按钮是产品形象的一个孩子或一个孩子这只会工作产品形象的兄弟姐妹。

来源

2016-08-22 20:29:55 Pat

如何在img hover上显示购物车WP

回答

相关问题