0

我对 CSS 有点陌生，但我正在 Squarespace 上创建一个网站，并且在覆盖父类时遇到了麻烦。基本上，我一直在努力让网格中的所有图像都是黑暗的，当你将鼠标悬停在它们上面时，它们会与文本一起亮起。问题是，来自 h2 和 h3 的文本似乎总是被 .wrapper 的不透明度覆盖。

目前源代码看起来像这样：

 <div class="item">
  <a href="/news/" data-dynamic-load data-dynamic-receiver="#detail_540e1c21e4b00b3e087650b7"   >
    <div class="wrapper">
      <div class="project-title">
        <h2>NEWS</h2>
        <h3>&mdash; view &mdash;</h3>
      </div>
    </div>
  </div>

我尝试了几种方法，在显示和使用不透明度之间。就像是：

#grid .item {
  .wrapper {
    opacity: 1;
    .project-title h2,h3 {
      display:none; 
    }
  }

  &.hovering .wrapper {
    opacity: 0;
    .project-title h2,h3 {
      display:block !important;}
      }
}

在解决这个问题上有什么建议吗？

4

1 回答 1

0

我相信这就是您正在寻找的。你可以把这个放到Custom CSS are under Design。任何作为链接的图像在悬停之前都将显示为黑白。悬停会给它们带来全彩。

目标幻灯片 - 应该与画廊一起使用

 #slideshow .slide img {
      -webkit-filter: grayscale(1);
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }
    #slideshow .slide img:hover {
      -webkit-filter: grayscale(0);
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%);
    }

仅定位链接图像

a:link img {
    -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

    a:hover img {
         -webkit-filter: grayscale(0);
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

于 2015-04-13T10:30:14.320 回答