Html CSS转换在第一次悬停时未触发

我正在尝试一个非常基本的转换，但在Safari上不合适。。 我只想在悬停时将背景图像从A更改为B。但是，在我第一次将鼠标悬停在元素上时，转换不起作用。 在第一次悬停时，它只是瞬间变化，而不是逐渐淡入/淡出

我在这儿闲逛--

我正在使用Wordpress网站，如果这有什么不同的话

我还包括了下面的HTML和CSS。如果有人能看到任何可能导致问题的错误，我将非常感谢任何帮助

.colBox{
宽度：100%；
最大宽度：300px；
最小高度：400px；
背景图像：url（“http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg");
右：0px；
过渡：全部。5s轻松进出；
-webkit过渡：所有.5s轻松输入输出；
-webkit背面可见性：隐藏；
}
colCon先生{
填充顶部：50px；
左侧填充：35px；
最大宽度：200px；
颜色：白色！重要；
字体系列：“蒙特塞拉特”，无衬线；
}
科尔海德先生{
颜色：白色！重要；
字体重量：400！重要；
字体大小：12px！重要；
}
Colheadg先生{
字体大小：40px；
字号：700；
填充顶部：50px；
}
柯尔普先生{
字体大小：12px；
线高：16px；
}
莫雷罗先生{
字体大小：20px；
}
.colBox:悬停{
宽度：100%；
最大宽度：300px；
最小高度：400px；
背景图像：url（“http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions-BG.jpg");
-webkit背面可见性：隐藏；
}
.悬停部{
宽度：200px；
利润上限：70像素；
}
.悬停舱的东西{
边际上限：0；
位置：相对位置；
宽度：100%；
z指数：2；
-webkit过渡：利润率最高0.5s；
过渡：利润最高0.5s；
}
.悬停div.隐藏的东西{
身高：0；
宽度：100%；
溢出：隐藏；
-webkit过渡：高度0.5s；
过渡：高度0.5s；
}
悬停div:hover.stuff{
利润上限：-40px；
}
.hover div:hover.stuff隐藏{
高度：40px；
}

---

尝试将转换时间从0.5秒增加到1.5秒：

.colBox {
  width: 100%;
  max-width: 300px;
  min-height: 400px;
  background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg");
  right: 0px;
  transition: all 1.5s ease-in-out;
  -webkit-transition: all 1.5s ease-in-out;
  -webkit-backface-visibility: hidden;
}

---

你在每一个浏览器中都会跳转，只是剩下的浏览器会缓存悬停图像。

---

基本上，你必须预先加载悬停的图像。例如，将其设置为父元素的背景。

但实际上，只要您有相同的、只是变暗的图像，就不要使用黑色半透明div覆盖，并避免加载第二个图像？感谢回复人！非常感谢。。但是我有点困惑。。您的意思是为.colBox div声明两个背景图像吗？再次感谢你，伙计！看起来你已经做到了：）你在下一个答案的评论中提到的方式不是很常见，但仍然可以。但是考虑一下：我仍然推荐半透明叠加。还有一种选择，在不久前流行的，允许减少请求的数量：例如，把1个图像变成2个：一个在上面，一个在下面。悬停-改变背景位置-只显示上半部分或下半部分。当然，伙计，是其他人在工作，并试图尽快完成。。毫无疑问，覆盖层是未来的发展方向。谢谢你的帮助！！对于那些想知道的人，我通过预加载第二个图像解决了这个问题，比如：body:after{display:none；content:url（path/to/image hovered.jpg）url（path/to/other image hovered.jpg）；}