SquareSpaceを使用したカスタムCSS

Question

私のSquarespaceページにカスタムCSSを追加しようとしています。ユーザーが画像上を移動すると、不透明度を変更したいが、画像に関連付けられたURLリンクがある場合のみ現在、私の下のコードはサイトのすべての画像に不透明度を変更させています。どんな助けも素晴らしいだろう！

カスタム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> 

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

EDIT（質問のアカウントの編集に取るように）

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

EDIT 2（アカウントアスカーさんのコメントに取ります）：

OK、解決策はimage-slide-anchor img:hoverをに変更することです。。