CSS：显示多个图像的悬停

Question

我的网站上有一个图标。

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

悬停 - > hide 2.png - > show yellow0.png - >隐藏yellow0 - >显示yellow1 - >隐藏yellow1 - >显示yellow2 - > ECT

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

编辑：

这是一个小提琴！ 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

Answer 2

我相信jQuery的会给你一个更好更简单的解决方案，但如果你只是想CSS，你可以定义每个关键帧图像和循环，在动画中：

.mobile-link img { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 
.mobile-link img:first-child { 
 
    opacity: 1; 
 
} 
 
.mobile-link:hover .mobile0 { animation: m0 5s; } 
 
.mobile-link:hover .mobile1 { animation: m1 5s; } 
 
.mobile-link:hover .mobile2 { animation: m2 5s; } 
 
.mobile-link:hover .mobile3 { animation: m3 5s; } 
 
.mobile-link:hover .mobile4 { animation: m4 5s; } 
 

 
@keyframes m0 { 
 
    0% { opacity: 1; } 
 
    25% { opacity: 0; } 
 
    50% { opacity: 0; } 
 
    75% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 
@keyframes m1 { 
 
    0% { opacity: 0; } 
 
    25% { opacity: 1; } 
 
    50% { opacity: 0; } 
 
    75% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 
@keyframes m2 { 
 
    0% { opacity: 0; } 
 
    25% { opacity: 0; } 
 
    50% { opacity: 1; } 
 
    75% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 
@keyframes m3 { 
 
    0% { opacity: 0; } 
 
    25% { opacity: 0; } 
 
    50% { opacity: 0; } 
 
    75% { opacity: 1; } 
 
    100% { opacity: 0; } 
 
} 
 
@keyframes m4 { 
 
    0% { opacity: 0; } 
 
    25% { opacity: 0; } 
 
    50% { opacity: 0; } 
 
    75% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
}

<a href="<?php echo get_page_link(6); ?>" class="mobile-link"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/d7/35/57/d73557a127ec6c453e54373d428964ca.jpg" class="mobile0 animated swing" /> 
 
    <img src="http://img4.wikia.nocookie.net/__cb20110726083017/spongebob/images/thumb/6/6f/Squidward_gets_angry.png/320px-Squidward_gets_angry.png" class="animated swing mobile1" /> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/6b/d4/25/6bd4259161a192423c454b8f4ab44e71.jpg" class="animated swing mobile2" /> 
 
    <img src="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" class="animated swing mobile3" /> 
 
    <img src="http://www.theblaze.com/wp-content/uploads/2012/04/photo-1.jpg" class="animated swing mobile4" /> 
 
</a>

注意：不要忘了使用上的动画浏览器前缀！