Question

我有一个Squarespace网站，其中包含许多摘要块库页面，每个页面都包含图像和文本。这些画廊有一个恼人的默认灯箱功能，悬停状态在图像上显示无格式文本。

我想取消除了一个以外的所有图库的灯箱行为。我的第一个想法是全局取消所有的Summary Block Gallery灯箱，如下所示：

  .summary-thumbnail-container {
  pointer-events: none;
  }

然后，对于单个摘要块库实例，我希望保持可点击状态，我只想定位其集合ID：

  #collection-538. . .15bb .summary-thumbnail-container {
  pointer-events: auto; 
  }

灯箱已成功全局取消，但ID定位无法覆盖单个实例的效果。

我错过了什么？感谢。

Answer 1

您的选择器中看起来有一些随机字符。试试这个：

#collection-538 .summary-thumbnail-container {
    pointer-events: auto; 
}

Answer 2

为此，您将要使用Block ID。如果您查看标记，您会看到Squarespace在#blockid-123....789类的旁边有一个.sqs-block，允许您按块而不是集合进行定位。定位集合ID将禁用页面上所有图库的点击次数。

另外，我会考虑使用这里指定的CSS not（）伪类：https://developer.mozilla.org/en-US/docs/Web/CSS/:not。

Answer 3

很高兴报告我的原始计划有效，但执行不力。首先，我在自定义CSS窗口中为摘要库块图像和标题链接全局禁用了所有灯箱：

    .summary-thumbnail-container, .summary-title-link {
pointer-events: none;
 }

我最初的错误是没有用逗号分隔类。有些人建议在这里使用！important限定符，但似乎没有必要。

最后，在单个网页上使用代码块，我能够使用collectionId在该页面上定位摘要库块，以将指针事件返回到其默认设置：

    <style>#collection-5785e43e15d5dbb0fab6719c 
.sqs-block-summary-v2, .summary-thumbnail-container {
 pointer-events: auto !important;
 }
  </style>

我仍然喜欢Jason Barone建议使用CSS not（）伪类，但这必须是我的下一个项目。

Squarespace：使用ID覆盖全局类属性

3 个答案: