Question

我的网站上有一个图标。

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

悬停 - ＆gt; hide 2.png - ＆gt; show yellow0.png - ＆gt; hide yellow0 - ＆gt;显示黄色1 - ＆gt; hide yellow1 - ＆gt;显示黄色2 - ＆gt; 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，您可以为每个图像定义关键帧，并在动画中循环：

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS：悬停，显示多个图像

2 个答案: