Html CSS：显示多个图像的悬停

我的网站上有一个图标

当我将鼠标悬停在第一个图像上时，我想将图标更改为4个不同的图像。因此，我知道如何在regular图像到yellow0.png之间切换，但如何继续切换到下一个图像（例如，半秒钟后）

悬停-->隐藏2.png-->显示黄色0.png-->隐藏黄色0-->显示黄色1-->隐藏黄色1-->显示黄色2-->等

HTML:

                <a href="<?php echo get_page_link(6); ?>" class="mobile-link">
                    <img src="<?php echo $themedir;?>/images/2.png" class="mobile-icon animated swing">
                    <img src="<?php echo $themedir;?>/images/yellow0.png" class="animated swing mobile0" >
                    <img src="<?php echo $themedir;?>/images/yellow1.png" class="animated swing mobile1" >
                    <img src="<?php echo $themedir;?>/images/yellow2.png" class="animated swing mobile2" >
                    <img src="<?php echo $themedir;?>/images/yellow3.png" class="animated swing mobile3" >

                </a>

编辑：

这是一把小提琴！

---

好的，我有一个可能的解决方案，问题是，您将无法使用

img

标记。您可以将图像用作

背景图像

，并在

上设置背景动画：悬停

注意：通过播放动画可以消除淡入效果

HTML

---

我相信jQuery会为您提供更好更简单的解决方案，但如果您只需要CSS，可以为每个图像定义关键帧，并在动画中循环：

.mobile link img{
位置：绝对位置；
不透明度：0；
}
.移动链接img：第一个孩子{
不透明度：1；
}
.mobile链接：hover.mobile0{动画：m0 5s；}
.mobile链接：hover.mobile1{动画：m15s；}
.mobile链接：hover.mobile2{animation:m2 5s；}
.mobile链接：hover.mobile3{动画：m3 5s；}
.mobile链接：hover.mobile4{动画：m4 5s；}
@关键帧m0{
0%{不透明度：1；}
25%{不透明度：0；}
50%{不透明度：0；}
75%{不透明度：0；}
100%{不透明度：0；}
}
@关键帧m1{
0%{不透明度：0；}
25%{不透明度：1；}
50%{不透明度：0；}
75%{不透明度：0；}
100%{不透明度：0；}
}
@关键帧m2{
0%{不透明度：0；}
25%{不透明度：0；}
50%{不透明度：1；}
75%{不透明度：0；}
100%{不透明度：0；}
}
@关键帧m3{
0%{不透明度：0；}
25%{不透明度：0；}
50%{不透明度：0；}
75%{不透明度：1；}
100%{不透明度：0；}
}
@关键帧m4{
0%{不透明度：0；}
25%{不透明度：0；}
50%{不透明度：0；}
75%{不透明度：0；}
100%{不透明度：1；}
}

---

用于jquery this我只想使用cssIf，如果您想替换图像，而不需要在图像之间悬停和取消悬停-按照@Quentin的建议使用CSS动画。

.mobile0{
    display: none;
}

.mobile1{
    display: none;
}

.mobile2{
    display: none;
}

.mobile3{
    display: none;
}

.mobile-link:hover .mobile-icon{
    display: none;
}

.mobile-link:hover .mobile0{
    display: block;
}

<div class="image-box"></div>

.image-box {
  height: 200px;
  width: 300px;
  background-color: #eee;
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/d7/35/57/d73557a127ec6c453e54373d428964ca.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}
.image-box:hover{
  -webkit-animation:imageRoll 10s infinite linear;
}

@-webkit-keyframes imageRoll{
  0% {
    background-image: Url("https://s-media-cache-ak0.pinimg.com/736x/d7/35/57/d73557a127ec6c453e54373d428964ca.jpg");
  }
  20% {
    background-image: Url("http://img4.wikia.nocookie.net/__cb20110726083017/spongebob/images/thumb/6/6f/Squidward_gets_angry.png/320px-Squidward_gets_angry.png");
  }
  40% {
    background-image: Url("https://s-media-cache-ak0.pinimg.com/736x/6b/d4/25/6bd4259161a192423c454b8f4ab44e71.jpg");
  }
  60% {
    background-image: Url("http://4.bp.blogspot.com/-8xBn9yEJwmA/T0pWr2az2mI/AAAAAAAABsc/ZfNT9R1WhEw/s320/funny_pictures_kitten_fell_off_chair_Funny_cats_and_dogs_pics-s450x329-49242-580.jpg");
  }
  80% {
    background-image: Url("http://www.theblaze.com/wp-content/uploads/2012/04/photo-1.jpg");
  }
}