javascript - 悬停时更改不透明颜色

Question

我的网页上有一个图像网格，我想在将鼠标悬停在图像上时更改不透明颜色，所以我所做的是:

figure.snip0016:hover img {
  background: (0, 235, 125, 0.3);
}

但是没有用。

目前，当您添加不透明度属性时，它工作正常，但我希望当您将鼠标悬停在它上面时，它会呈现橙色或其他颜色。

完整代码如下:

    @import url('https://fonts.googleapis.com/css?family=Karla&display=swap');

    figure.snip0016 {
      font-family: 'Karla', sans-serif;
      color: #fff;
      position: relative;
      overflow: hidden;
      max-width: 100%;
      width: 100%;
      background: #000000;
      text-align: left;
    }
    figure.snip0016 * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    figure.snip0016 img {
      max-width: 100%;
      opacity: 1;
      width: 100%;
      -webkit-transition: opacity 0.35s;
      transition: opacity 0.35s;
    }
    figure.snip0016 figcaption {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 60px 3em;
      width: 100%;
      height: 100%;
    }
    figure.snip0016 figcaption::before {
      position: absolute;
      top: 30px;
      right: 30px;
      bottom: 30px;
      left: 100%;
      border-left: 4px solid rgba(255, 255, 255, 0.8);
      content: '';
      opacity: 0;
      background-color: rgba(255, 255, 255, 0.5);
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
      -webkit-transition-delay: 0.6s;
      transition-delay: 0.6s;
    }
    figure.snip0016 h2,
    figure.snip0016 p {
      margin: 0 0 5px;
      opacity: 0;
      -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
      transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
    }
    figure.snip0016 h2 {
      word-spacing: -0.15em;
      font-weight: 300;
      text-transform: ;
      -webkit-transform: translate3d(30%, 0%, 0);
      transform: translate3d(30%, 0%, 0);
      -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }
    figure.snip0016 h2 span {
      font-weight: bold;
    }
    figure.snip0016 p {
      font-weight: 200;
      -webkit-transform: translate3d(0%, 30%, 0);
      transform: translate3d(0%, 30%, 0);
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      line-height: 20px;
    }
    figure.snip0016 a {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      position: absolute;
      color: #ffffff;
    }
    figure.snip0016:hover img {
      opacity: 0.2;
    }
    figure.snip0016:hover figcaption h2 {
      opacity: 1;
      -webkit-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0);
      -webkit-transition-delay: 0.4s;
      transition-delay: 0.4s;
    }
    figure.snip0016:hover figcaption p {
      opacity: 0.9;
      -webkit-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0);
      -webkit-transition-delay: 0.6s;
      transition-delay: 0.6s;
    }
    figure.snip0016:hover figcaption::before {
      background: rgba(255, 255, 255, 0);
      left: 30px;
      opacity: 1;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
    }

    <div class="portfolio leadership popupTrigger" data-cat="leadership" data-popup-id="">
                      <div class="portfolio-wrapper">
                        <figure class="snip0016">
                          <img alt="" src="https://via.placeholder.com/180">
                          <figcaption class="hideForMobile hideForPhone hideForTablet">
                            <h2 style="font-size: 20px;">Chris<br>
                            <strong style="color: #EF4D26; font-size: 20px;">Saura</strong></h2>
                            <p style="font-size: 2vh">Team Manager</p>
                          </figcaption>
                        </figure>
                      </div>
                    </div>

Answer 1

“无法为图像提供背景颜色。”

您可以为图像添加一些填充以查看背景颜色，因为您正在为图像使用背景颜色 [悬停时]。也添加一些填充，然后根据需要查看结果。

figure.snip0016:hover img {
      background: rgba(0, 235, 125, 0.3);
      padding:15px;
    }

或者您可以为图像的外部区域提供背景颜色:

figure.snip0016:hover{
      background: rgba(0, 235, 125, 0.3);
    }

希望你能理解