使用SquareSpace定制CSS

我正在尝试将自定义CSS添加到我的Squarespace页面。当用户将鼠标悬停在图像上时，我希望它更改不透明度，但前提是存在与图像关联的URL链接。目前，我下面的代码正在导致我网站上的所有图像更改不透明度。任何帮助都会很好

自定义CSS:.sqs图库设计网格幻灯片：悬停{不透明度：.6！重要；}

 <div class="sqs-gallery">

            <div class="slide" data-type="image">
              <div class="margin-wrapper">
                <a


                        href="/umma" 



                  class="image-slide-anchor content-fit"
                >
                  <noscript><img src="https://static1.squarespace.com/static/51eb1fb3e4b0ca0d358f4e39/58b4538be4fcb5c5e088f247/58b454483a04111160e30ab0/1488228183093/logo.png"  alt="UX Research"  /></noscript><img class="thumb-image" alt="UX Research" data-src="https://static1.squarespace.com/static/51eb1fb3e4b0ca0d358f4e39/58b4538be4fcb5c5e088f247/58b454483a04111160e30ab0/1488228183093/logo.png" data-image="https://static1.squarespace.com/static/51eb1fb3e4b0ca0d358f4e39/58b4538be4fcb5c5e088f247/58b454483a04111160e30ab0/1488228183093/logo.png" data-image-dimensions="266x125" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="58b454483a04111160e30ab0" data-type="image" />
                </a>
                  <div class="image-slide-title">UX Research</div>
              </div>
            </div>

            <div class="slide" data-type="image">
              <div class="margin-wrapper">
                <a


  </div>



</div>

用户体验研究
尝试在类名之前添加
a
选择器，我假设类名引用图像。像这样：

a .sqs-gallery-design-grid-slide:hover {
    opacity: .6 !important;
} 

a[href^=http] .sqs-gallery-design-grid-slide:hover {
    opacity: .6 !important;
}

这将适用于包装在
a
标记中的所有图像

您可以更进一步，通过使用
^=
属性CSS选择器，将其限制为仅重定向到URL的链接。这仅用于选择属性值以给定字符串开头的元素，例如
http
（用于链接）。像这样：

a .sqs-gallery-design-grid-slide:hover {
    opacity: .6 !important;
} 

a[href^=http] .sqs-gallery-design-grid-slide:hover {
    opacity: .6 !important;
}

编辑（考虑问题编辑）：

使用此代码：

.image-slide-anchor img:hover {
      opacity: .6 !important;
}

编辑2（考虑询问者的评论）：

好的，工作解决方案是将
图像幻灯片锚定img:hover
更改为
a.image-slide-anchor[href]img:hover
a.sqs画廊设计网格幻灯片：hover{opacity:.6！important；}
？HTML是什么样子的？我将我的HTML添加到了原始帖子中感谢您的帮助！我试了你的三个建议。最后一个仍然会导致没有URL链接的图像也改变不透明度，还有其他想法吗？你能提供你网站的URL吗？你在问题中提到的类在你粘贴的代码中找不到。对我来说，任何东西都工作得很好。你能更具体地说你想在悬停时淡出哪些图像吗？当然，如果你向下滚动，封面上有3个图像（瓷砖：称为UMMA，Centro，陶瓷作品），链接到我网站的另一个页面。我希望当你将鼠标悬停在这些图像上时，它们会改变不透明度。这种情况目前正在发生，但如果您单击第一个名为UMMA的图像，它会将您带到另一个页面，该页面包含其他没有链接的图像。这些图像也在改变不透明度（我不希望发生这种情况）。因此，我做了更多的研究，使用SquareSpace，您必须调用每个页面具有的集合ID。基于这段youtube视频，所以我尝试使用collections id，仅用于封面…但不透明度仍然会影响封面以外的图像。