自定义CSS与SquareSpace

我想添加自定义CSS到我的Squarespace页面。当用户将鼠标悬停在图片上时，我希望它改变不透明度，但只有在存在与图片关联的URL链接时才会更改。目前，我的下面的代码导致我网站上的所有图像改变不透明度。任何帮助将是伟大的！自定义CSS与SquareSpace

自定义CSS：.sqs画廊 - 设计 - 网幻灯片：悬停{不透明：0.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>

来源

2017-02-28 Sammy Smith

'a .sqs-gallery-design-grid-slide：hover {opacity：.6！important;}'？ –

HTML的外观如何？ –

我将我的HTML添加到原文 –

尝试它，我假设类名之前添加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; 
}

EDIT（考虑到问题的帐户编辑）：

使用此代码：

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

EDIT 2（考虑到提问者的评论）：

好的，工作方案是将image-slide-anchor img:hover更改为a.image-slide-anchor[href] img:hover。

来源

2017-02-28 21:58:52

感谢您的帮助！我尝试了你的三条建议。最后一个仍然会导致没有URL链接的图像也会改变不透明度，还有其他想法？ –

你能提供你网站的网址吗？你在你的问题中提到的类没有在你粘贴的代码中找到 –

确定的事情.....它仍然是一个正在进行的工作。 http://www.sophieamberkar.com/ –

自定义CSS与SquareSpace

回答

相关问题