2016-08-18 21 views
0

我有一个Squarespace网站,其中包含多个Summary Block Galleries页面,每个页面都包含图像和文本。这些画廊有一个恼人的默认灯箱功能,悬停状态在图像上显示无格式文本。Squarespace:使用ID覆盖全局类属性

我想取消这个灯箱的行为,除了一个以外的所有画廊。我首先想到的是在全球范围内取消所有摘要座画廊灯箱广告是这样的:

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

那么对于单个摘要座画廊比如我想留点击,我只会针对其收集ID:

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

全局成功取消Lightbox,但ID定位不起作用以覆盖单个实例的效果。

我错过了什么?谢谢。

+0

没有这个 “#collection-538 ... .15bb .summary-thumbnail-container” 是“#collection-538 .summary-thumbnail-container”? –

回答

0

看起来你在选择器中有一些随机字符。试试这个:

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

随机字符可能是故意的。我怀疑Squarespace会为它的ID自动生成随机的十六进制数字。 –

0

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

此外,我会考虑使用CSS not()伪类,如下所示:https://developer.mozilla.org/en-US/docs/Web/CSS/:not

+0

我喜欢使用伪类的想法,但有一些更基本的东西我不理解。我创建了一个测试页面,其中包含两个摘要库列表块,每个块都包含图像,标题和正文文本。每个块都有唯一的收集ID和块ID。使用页面上的代码块,我似乎无法使用其块ID定位摘要块: '' –

0

高兴地报告说我原来的计划是有效的,但执行不力。首先,我禁用了所有灯箱全球在自定义CSS窗口既总结画廊座图像和标题链接:

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

我原来的错误是不能用逗号分隔的类。有人建议在这里使用!重要的限定词,但似乎没有必要。

最后一个网页上使用一个代码块,我能够针对使用collectionId指针事件恢复为默认设置,页面上的内容库块:

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

我仍然像Jason Barone对使用CSS not()伪类的建议一样,但那必须是我的下一个项目。