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，很难确切地看到这里发生了什么，但我会尝试使用你的过渡长度，看看是否有帮助。

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

1 个答案: