我正在尝试一个非常基本的过渡,但是在Safari上不正确。
我要做的就是在悬停时将背景图像从A更改为B。但是,当我第一次将鼠标悬停在元素上时,该转换不起作用。
第一次悬停时,它只是立即改变,而不是逐渐淡入/淡出。
JSFiddle在这里-https://jsfiddle.net/RalphCSD/z9nx30co/4/
我正在使用Wordpress网站,如果有任何区别。
我还包括下面的HTML和CSS。如果任何人看到可能导致问题的任何错误,我们将不胜感激。
.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 .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
}
.colCon {
padding-top: 50px;
padding-left: 35px;
max-width: 200px;
color: white !important;
font-family: 'Montserrat', sans-serif;
}
.colHead {
color: white !important;
font-weight: 400 !important;
font-size: 12px !important;
}
.colHeadLg {
font-size: 40px;
font-weight: 700;
padding-top: 50px;
}
.colP {
font-size: 12px;
line-height: 16px;
}
.moreArrow {
font-size: 20px;
}
.colBox:hover {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions-BG.jpg");
-webkit-backface-visibility: hidden;
}
.hover-div {
width: 200px;
margin-top: 70px;
}
.hover-div .stuff {
margin-top: 0;
position: relative;
width: 100%;
z-index: 2;
-webkit-transition: margin-top 0.5s;
transition: margin-top 0.5s;
}
.hover-div .stuff-hidden {
height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.hover-div:hover .stuff {
margin-top: -40px;
}
.hover-div:hover .stuff-hidden {
height: 40px;
}
<div class="colBox">
<a href="#">
<div class="colCon">
<h2 class="colHead">CUSHION COLLECTION</h2>
<div class="hover-div">
<div class="stuff">
<p class="colHeadLg">Cushions</p>
<p class="colP">Our luxury feather filled cushions are statement pieces each with a story to tell</p>
</div>
<div class="stuff-hidden">
<p class="moreArrow">More <span><i class="fas fa-arrow-right"></i></span></p>
</div>
</div>
</div>
</a>
</div>
最佳答案
尝试将过渡时间从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;
}