Benutzerdefiniertes CSS mit SquareSpace

Question

Ich versuche, benutzerdefiniertes CSS zu meiner Squarespace-Seite hinzuzufügen. Wenn ein Benutzer über ein Bild schwebt, möchte ich die Opazität ändern, aber nur, wenn dem Bild eine URL-Verknüpfung zugeordnet ist. Momentan verursacht der unten stehende Code, dass alle Bilder auf meiner Website die Deckkraft ändern. Jede Hilfe wäre großartig!

benutzerdefinierte CSS: .sqs-Galerie-Design-grid-slide: Hover {Opazität: 0,6 wichtig;}

<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

Versuchen Sie, die a Wähler vor dem Klassennamen hinzugefügt, die ich angenommen bin bezieht sich auf das Bild. Wie folgt aus:

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

Dies wird für alle Bilder arbeiten, die innerhalb a Tags gewickelt werden.

Sie könnten sogar noch weiter gehen und es auf nur Links beschränken, die auf URLs umleiten, indem Sie den CSS-Selektor ^= verwenden. Dies wird verwendet, um nur Elemente auszuwählen, deren Attributwert mit einer gegebenen Zeichenfolge beginnt, z. http (für Links). Wie folgt aus:

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

EDIT (berücksichtigen Bearbeitung der Frage):

Mit diesem Code:

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

EDIT 2 (tragen Kommentar Konto Fragesteller):

OK, die Arbeitslösung ist image-slide-anchor img:hover zuzu ändern.