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>

注意：不要忘了使用上的動畫瀏覽器前綴！