Question

我对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;}
      }
}

解决此问题的任何建议？

Answer 1

我相信这就是你要找的东西。你可以将它放入Custom CSS下的Design中。作为链接的任何图像在悬停之前都将显示为黑白。徘徊会使它们变成全彩色。

目标幻灯片 - 可以使用图库

＆＃13;

 #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%);
    }

＆＃13;

仅定位链接图片

＆＃13;

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%);
}

＆＃13;

覆盖CSS中的父级（方形空间）

1 个答案: