Wordpress 图库在鼠标悬停时更改图像

Question

您好，我必须显示一个图像网格；网格中的每个项目都是不同的产品，它有 2-3 个图像，但只有第一个图像应该是可见的。在鼠标悬停时应该循环其他图像。如何在 wordpress 中做到这一点？

我想为每个产品插入一个画廊，并从 css 中仅显示第一个孩子并显示：无所有其他图像。但现在我不知道如何在鼠标悬停时添加幻灯片。

还有其他解决方案吗？

谢谢

Answer 1

根据提供的 sn-p，这是应该完成这项工作的 CSS。 在您的示例中，我刚刚添加了一个包装器 div，这将是我们的视口（意味着一次只显示一个图像的容器）。 我还删除了所有清除浮动的 br，因为 CSS 使用浮动来并排显示幻灯片的所有图像。

<div id="viewport">
  <div id="gallery-1" class="gallery galleryid-20 gallery-columns-1 gallery-size-collection">
    <dl class="gallery-item">
        <dt class="gallery-icon portrait">
            <a data-lightbox-gallery="lightbox-gallery-1" href="image1.jpg" data-rel="lightbox-gallery-1">
                <img id="image1" style="border: medium none;" class="attachment-collection" alt="image1" height="420" width="300">
            </a>
        </dt>
    </dl>
    <dl class="gallery-item">
        <dt class="gallery-icon portrait">
            <a data-lightbox-gallery="lightbox-gallery-1" href="image2.jpg" data-rel="lightbox-gallery-1">
                <img id="image2" style="border: medium none;" class="attachment-collection" alt="image2" height="420" width="300">
            </a>
        </dt>
    </dl>
    <dl class="gallery-item">
        <dt class="gallery-icon portrait">
            <a data-lightbox-gallery="lightbox-gallery-1" href="image3.jpg" data-rel="lightbox-gallery-1">
                <img id="image3" style="border: medium none;" class="attachment-collection" alt="image3" height="420" width="300">
            </a>
        </dt>
    </dl>
  </div>
</div>

请注意，我为所有图像添加了一些 ID，只是为了通过 CSS 获得不同的颜色

现在，关于 CSS 部分：

/* THIS IS JUST FOR STYLING FAKE IMAGES, NOT PART OF THE SOLUTION */

#image1{background-color: red;}
#image2{background-color: green;}
#image3{background-color: blue;}


#viewport{width: 300px; overflow: hidden;}
#gallery-1{width: 900px; height: 420px; white-space: nowrap;}
#gallery-1 dl{float: left; margin: 0;}

/* ON HOVER, JUST TRIGGER ANIMATION WITH KEY FRAME TO PERFORM SLIDE AND PAUSE */

#viewport:hover #gallery-1{
      -webkit-animation-name: slide;
      -webkit-animation-duration: 4s;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-iteration-count: infinite;     
}


/* ANIMATION ON 4S, PERCENTAGE OF THE ANIMATION HAS SAME VALUES TO MIMIC PAUSE ON ONE IMAGE */

 @-webkit-keyframes slide
  { 
        0% { transform: translateX(0); }
        15% { transform: translateX(-300px); }
      35% { transform: translateX(-300px); }
      50% { transform: translateX(-600px); }
      70% { transform: translateX(-600px); }
      85% { transform: translateX(0); } 
      100% { transform: translateX(0); } 
  }