加载页面时对产品的悬停效果

Question

我的网站上有一些关于悬停效果的问题。

当我加载一个集合然后在一个产品上快速移动时，悬停效果会出现故障，如果我转到另一个产品，它会显示两次效果 (hover bug)

当我在加载产品时将鼠标放在产品上时，它会给我这个结果。

这是我的代码：

.hoverbuttons {display:none}
.quickbutton {display:block}

.hovereffect {margin-top: -38px;
    display: inline-block;
    position: relative;
    left:0;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);;
    border-top: 0px solid {{settings.border_color}};
    transition: all .7s ease-in;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in;
    transition-delay: initial;

}

.hoverthumb {box-shadow: 0 0 10px rgba(0,0,0,.15);}

.thumbnail {height:295px}

.formbkg{background-color:white;border:1px solid {{settings.productformborder}};padding: 10px;}

.swatch .swatch-element {
    background-color: white;
}

Answer 1

不确定这是否是你的问题，但你有一个双重;;在这一行

background: rgba(255, 255, 255, 0.85);; 

这将阻止您使用其他过渡/样式。否则，如果没有您的 HTML，很难确切地看到这里发生了什么，但我会尝试使用您的过渡长度，看看是否有帮助。