我正在尝试一个非常基本的过渡,但是在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;
}

09-05 12:58
查看更多