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

【问题标题】：Overriding parent in CSS (squarespace)覆盖 CSS 中的父级（方形空间）
【发布时间】：2015-04-13 18:30:14
【问题描述】：

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

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

【问题讨论】：

我们需要澄清一下。这其中的哪一部分不适合您？什么不透明度最重要？
Resetting the opacity of a child elements - Maple Browser (Samsung TV App) 的可能重复项
.project-title h2,h3 {display:block !important;}} 似乎是问题所在。 h2,h3 在第一部分被隐藏后将不再显示。
感谢您的参考。我看了看它并尝试了它的建议，使用颜色函数的不透明度而不是不透明度本身。但是颜色似乎一次只应用于单个图像，而不是像不透明度那样应用于网格中的图像。
您好！我可以立即告诉您选择了错误的对象。这不是 H2 或 H3 情况。这些是文本标题。这将是一个图像项目。但是，当您在这里询问有关 Squarespace 的问题时，您必须说明您使用的是哪个模板，因为它们的结构都不同。请编辑您的帖子并包含模板和 Squarespace 版本（假设它是第 6 版，因为您说您是新手）。

标签： css parent-child squarespace

【解决方案1】：

我相信这就是您正在寻找的。你可以把这个放到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%);
}

【讨论】：