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

편집 2 (계정 아스 커의 의견을 고려하기 위해) :

보통 문제가 해결 될 경우 image-slide-anchor img:hover을 a.image-slide-anchor[href] img:hover.