我想在我的产品图片上创建一个悬停效果,可以像这样滑动到第二张图片:
.product-img-wrapper img:last-of-type {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
我需要在我的代码中添加什么以及我应该把它放在什么地方?我正在使用 bigcartel 的“Neat”主题。
谢谢!
答案 0 :(得分:0)
你写的是初始状态。不确定悬停时要发生什么。假设您希望图像的悬停状态可见。代码将是:
.product-img-wrapper img:last-of-type:hover {
opacity: 1;
visibility: visible;
}