使用 SquareSpace 自定义 CSS

Question

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

自定义 CSS : .sqs-gallery-design-grid-slide:hover {opacity:.6 !important;}

 <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>

Answer 1

尝试在类名之前添加a 选择器，我假设它指的是图像。像这样：

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

这适用于包装在a 标签中的所有图像。

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

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

编辑（考虑到问题的编辑）：

使用此代码：

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

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

好的，可行的解决方案是将image-slide-anchor img:hover 更改为a.image-slide-anchor[href] img:hover。