html - CSS :hover that shows more than one image

Question

我的网站上有一个图标。

当我将鼠标悬停在第一个图像上时，我想将图标更改为 4 个不同的图像。所以我知道如何在 regilar 图像和 yellow0.png 之间切换，但我如何继续到下一个图像(比如半秒后..)

悬停 --> 隐藏 2.png --> 显示 yellow0.png --> 隐藏 yellow0 --> 显示 yellow1 --> 隐藏 yellow1 --> 显示 yellow2 --> 等

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>

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;
}

编辑:

这是一个 fiddle ! http://jsfiddle.net/6kdvsthx/

Answer 1

好的，所以我有一个可能的解决方案，问题是，您将无法使用 img 标签。您可以将图像用作 background-image 并在 :hover

上使用动画背景

注意:淡入淡出的效果可以通过播放动画来移除。

HTML

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

CSS

.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");
  }
}

JSFIDDLE