Linked squares that change color on hover.

Hi!

https://julietmorrison.squarespace.com/past-productions

password: juliet

I'm looking for some CSS that will change these text boxes to white on hover with black letters. I need the whole box to be a clickable link that changes color no matter where you hover on each box.

@morgancreativeco  There's a way to change the background color and text of a text block on hover, however the way I know doesn't change the text until you specifically hover over the words. 

It would may be easier to make them buttons instead of text blocks. You can customize a button you don't normally use to have the correct background color and font, then target it using one of the blocks of code below. 

// Change all Tertiary Buttons on hover

.sqs-block-button .sqs-button-element--tertiary:hover{
  background: #ffffff;
  color: #000000
}

// Change all Tertiary Buttons on hover in that section 

section[data-section-id="64fbe1c8b40cb56f80552199"] .sqs-block-button .sqs-button-element--tertiary:hover{
  background: #ffffff;
  color: #000000
}

This code is for tertiary buttons but if you alter your primary or secondary buttons, you can replace .sqs-button-element--tertiary:hover with:

.sqs-button-element--primary:hover

.sqs-button-element--secondary:hover

I think @WCS is on the right track with using a button as a starting point. A button meets many of the needed elements for the effect you want to achieve.

I did some tinkering on my test site and came up with the following. On my test site I used a primary button pill shape.

Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .primary-button-shape-pill #page .page-section .sqs-button-element--primary {
  
    border-radius : unset;
    
    }
    
  @media ( hover : hover ) {
  
    .primary-button-style-solid .site-wrapper #page .page-section .sqs-button-element--primary:hover {
    
      opacity : unset;
      
      }
      
    }
    
  .primary-button-style-solid .site-wrapper #page .page-section .sqs-button-element--primary {
  
    text-decoration-line : underline;
    
    }
    
  .primary-button-style-solid .site-wrapper #page .page-section .sqs-button-element--primary:hover {
  
    color : black;
    background-color : white;
    
    }
    
  #siteWrapper.site-wrapper #page .page-section .sqs-button-element--primary {
  
    border : 1px solid black;
    
    }
    
  @media
  
    screen and ( min-width : 768px ),
    screen and ( max-width : calc( 1512px - 1px ) ) and ( orientation : landscape )
    
      {
      
        #siteWrapper #page .page-section .sqs-button-element--primary {
        
          font-size : calc( ( var( --heading-1-size-value ) - 1 ) * 1.2vw + 1rem );
          
          }
          
        }
        
  </style>

This is for v7.1.

This code restricts the effect to the #page element.

This is not a solution but some example code.

Let us know how it goes.

@morgancreativeco

If you want to add a stroke like @creedon has in his code, here's an alternative example:

// Change all Tertiary Buttons on hover

.sqs-block-button .sqs-button-element--primary:hover{
  background: #ffffff;
  color: #000000;
  border: solid #000000;
  border-width: 2px !important; You can adjust this value to increase or decrease the border
  transition: all ease-in-out 0.5s; This adds a small transition, which you can change the timing of
}

// Change all Tertiary Buttons on hover in that section 

section[data-section-id="64fbe1c8b40cb56f80552199"] .sqs-block-button .sqs-button-element--primary:hover{
  background: #ffffff;
  color: #000000;
  border: solid #000000;
  border-width: 2px !important;  You can adjust this value to increase or decrease the border
  transition: all ease-in-out 0.5s; This adds a small transition, which you can change the timing of
}

// Change all Tertiary Buttons on hover on that page

#collection-64fb35586b05860c9e24c7a8 .sqs-block-button .sqs-button-element--primary:hover{
  background: #ffffff;
  color: #000000;
  border: solid #000000;
  border-width: 2px !important;  You can adjust this value to increase or decrease the border
  transition: all ease-in-out 0.5s; This adds a small transition, which you can change the timing of
}

Creedon's code will adjust all the buttons of that type on a specific page and gives you the ability to make further style changes. That's helpful if you don't want to set a certain button style to have the shape, fill, and text that you need to achieve this look.

Mine is based on setting up a button style to match and using code to change the hover effects only. (I find that I rarely use more than 2 button types, so I find it can be easier to set up a 3rd type for situations like this -- especially if I may want to use it on another page on the site.)