css - 使用 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 内包裹的所有图像标签。

您可以更进一步，使用 ^= 将其限制为仅重定向到 URL 的链接。属性 CSS 选择器。这用于仅选择其属性值以给定字符串开头的元素，例如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 .