在 Envira 画廊（wordpress）中悬停时显示不同的图像答案

【问题标题】：Show different image on hover in Envira gallery (wordpress)在 Envira 画廊（wordpress）中悬停时显示不同的图像
【发布时间】：2016-10-16 15:21:12
【问题描述】：

我想在 wordpress 的 Envira 图库中悬停时显示不同的图像。

图库有 20 张图片，对于每张图片，我想展示其单独的悬停图片。

我可以像这样通过一般 style.css 访问图像：

.envira-gallery-item-1:hover{
background-image: url('1-2-1.jpg');
opacity: 0.5;
}

通过这种方式，可以在悬停时更改不透明度，但我无法更改图像本身。

为该项目生成的 HTML（从检查器复制）如下所示：

  <div id="envira-gallery-item-115" class="envira-gallery-item
  enviratope-item envira-gallery-item-1" style="padding-left: 5px;
  padding-bottom: 30px; padding-right: 5px; position: absolute; 
  left: 0px; top: 0px;" itemscope=""
  itemtype="http://schema.org/ImageObject">
      <div class="envira-gallery-item-inner">
          <a href="http://localhost:8888/november/ss16look1-1"
          class="envira-gallery-96 envira-gallery-link"
          rel="enviragallery96" title="1-1" data-envira-caption="1-1"
          data-envira-retina="" data-thumbnail="" itemprop="contentUrl">
              <img id="envira-gallery-image-115" class="envira-gallery-image
              envira-gallery-image-1" data-envira-index="1"
              src="http://localhost:8888/november/wp-content/uploads/2016/06/1-1-640x480.jpg" 
              data-envira-src="http://localhost:8888/november/wp-content/uploads/2016/06/1-1-640x480.jpg" 
              data-envira-gallery-id="96" data-envira-item-id="115" 
              alt="" title="1-1" itemprop="thumbnailUrl" 
              srcset="http://localhost:8888/november/wp-content/uploads/2016/06/1-1-1280x960.jpg 2x" 
              style="opacity: 1;"></a></div></div>

有没有办法在图库中悬停时将每张图片更改为另一张图片？

【问题讨论】：

标签： css image wordpress hover

【解决方案1】：

在我看来，您想将图像本身的不透明度设置为 0，并将背景图像放在其父容器上：

.envira-gallery-item-1 .envira-gallery-item-inner { 
    background: url('1-2-1.jpg') !important; 
}
.envira-gallery-item:hover img { 
    opacity: 0 !important; transition: opacity .2s; 
}

由于 Envira 在其画廊中添加了繁重的样式，因此您需要将 !important 添加到大多数 CSS 规则中。

【讨论】：