Jump to content

Linked squares that change color on hover.

Recommended Posts

  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

@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

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment

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.

ScreenShot2023-09-09at10_17_54PM.png.d0917eb79233e20166aaad573fb5f1c0.pngUntitled.png.798c5d0a033f53dcdb8b52ca8f1ec37e.png

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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.) 

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.