ios - .class :hover . otherClass {...} - iOS Safari 不工作

Question

我尝试使用 animate.css 在悬停时制作动画。在桌面(safari、chrome)和移动设备(chrome)上一切正常，但在 Safari(iOS)中却不行。

iOS Chrome | iOS Safari

//main flexbox

.ref {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

//flexbox child

    .ref-content {
        height: 350px;
        //background: grey;
        width: 50%;
        transition: 0.75s;
        background-size: cover !important;
    }
// flexbox text
    .ref-text {
      text-align: center;
      display: none;
      position: relative;
      transition: 2.5s !important;
      width: 100%;
      height: 100%;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;

      h1 {
        position: relative;
        top: 30%;
        display: block;
        text-transform: uppercase;
        padding-bottom: 10px;
        // animate css použitý ako hover
        -webkit-animation: fadeInLeft 1.5s;
        animation: fadeInLeft 1.5s;
      }

      p {
        position: relative;
        top: 30%;
        font-size: 1.5em;
        // animate css použitý ako hover
        -webkit-animation: fadeInLeft 1.75s;
        animation: fadeInLeft 1.75s;
        opacity: 0.75;
      }

      a {
        display: block;
        position: relative;
        top: 35%;
        // animate css použitý ako hover
        -webkit-animation: fadeInLeft 2s;
        animation: fadeInLeft 2s;
        text-decoration: none;
        background: #fff;
        color: black;
        max-width: 15%;
        padding: 10px 0;
        border-radius: 25px;
      }

    }

    // ref 1
    //ref1 background

    .ref-content:nth-child(1) {
      background-image: url('http://lavenderforluck.co/wp-content/uploads/2019/02/modern-home-office-desks-desk-designs-executive-options-for-ergonomics-sydney.jpg');
    }

    .ref-content:nth-child(1):hover .ref-text {
      display: block;
      color: #fff;
      // fadeIn color overlay
      -webkit-animation: fadeIn 1.5s;
      animation: fadeIn 1.5s;
      background: rgba(purple, 0.75);
    }

    // ref 2
    .ref-content:nth-child(2) {
      background-image: url('http://lavenderforluck.co/wp-content/uploads/2019/02/modern-home-office-desks-desk-designs-executive-options-for-ergonomics-sydney.jpg');
    }

    .ref-content:nth-child(2):hover .ref-text {
      display: block;
      color: #fff; 
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
      background: rgba(black, 0.75);
    }

<!-- referencie -->
    <div class="ref">

      <div class="ref-content">
        <div class="ref-text">
          <h1>RIVER VIEW RESIDENCE BRATISLAVA</h1>
          <p>#web #webdesign #forms #campaing</p>
          <a href="#">Zobraziť</a>
        </div>
      </div>

      <div class="ref-content">
        <div class="ref-text">
          <h1>RIVER VIEW RESIDENCE BRATISLAVA</h1>
          <p>#web #webdesign #forms #campaing</p>
          <a href="#">Zobraziť</a>
        </div>
      </div>

    </div>

有人可以帮我解决我的问题吗？

• 我尝试过制作动画。
• 如果有人能解决我的问题，我会很高兴
• 任何错误消息，一切都在屏幕截图中:-)
• 我已经尝试了很多选项来解决我的问题，但其中任何一个都效果不佳...

我也在 stackoverflow 上寻找一些答案，但我没有找到任何类似问题的答案......

Answer 1

您需要创建一个叠加层!并且在 .ref-text 类中，您可以使用不透明度“播放”:0；而不是显示:无；。

//scss code
.ref-content{
   position: relative;

   .ref-text{
      opacity: 0;
      position: relative;
      z-index: -1;
   }

   &:before {
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       opacity: 0;
       background: rgba(0, 0, 0, 0.35); //put your rgba color here
       -webkit-transition: opacity 0.2s ease;
       transition: opacity 0.2s ease;
       content: '';
       z-index: -1;
   }

   &:hover{
     &:before{
        opacity: 1;       
       -webkit-transition: opacity 0.2s ease;
       transition: opacity 0.2s ease;
      }

      .ref-text{
         opacity: 1;
         position: relative;
         z-index: 1;
         -webkit-transition: opacity 0.2s ease;
         transition: opacity 0.2s ease;
      }
   }

}