Question

我一直在网上寻找解决问题的方法。当用户将鼠标悬停在我的网页上的某个元素上时，我正在尝试将五个图像相互加载。到目前为止，我可以在悬停时显示图像，但我真正需要的是在排队时悬停显示5个图像？

＆＃13;

$(document).ready(function() {
    
    $(".Invisible").hide()
    
    $(".image1").hover(
      
      function () {
        $('.Invisible').stop().fadeTo("slow", 1.0);
      }, 
      function () {
        $('.Invisible').stop().fadeOut("slow");
      }
      
    );

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="workbox1" class="container">
  <div class="image1"><img alt="" src="http://placehold.it/300x300" style="width:100%" height="120%"/></div>
  <div class="Invisible"></div>                  
</div>

＆＃13;

Answer 1

创建了一个使用纯CSS（没有jQuery）的fiddle 。基本上我们将opacity放到0并在元素上设置transition-delay。

不要忘记将prefixes添加到transition和transition-delay，即 - -webkit-transition等。

HTML

<div id="workbox1" class="container">
  <div class="image1">
      <img alt="" src="http://placehold.it/100x100" />
  </div>
  <div id="imagesToFadeIn">
     <img src="http://placehold.it/100x100" />
     <img src="http://placehold.it/100x100" />
     <img src="http://placehold.it/100x100" />
     <img src="http://placehold.it/100x100" />
     <img src="http://placehold.it/100x100" />
  </div>    
</div>

CSS

.image1:hover ~ #imagesToFadeIn img {
    opacity: 1;
}

#imagesToFadeIn img {
    opacity: 0;
    transition: all .3s ease-in;
}

#imagesToFadeIn img:nth-child(2) {
    transition-delay: .1s;
}

#imagesToFadeIn img:nth-child(3) {
    transition-delay: .2s;
}

#imagesToFadeIn img:nth-child(4) {
    transition-delay: .3s;
}

#imagesToFadeIn img:nth-child(5) {
    transition-delay: .4s;
}

如果您想要隐藏图片的容器，请将display设置为none上的#imagesToFadeIn，然后将鼠标悬停设置为block

悬停时会出现多个图像

1 个答案: