Jump to content

Change Announcement Bar font color on hover

Recommended Posts

Site URL: https://helicon-banjo-kjhj.squarespace.com/

pw: southernbeauty

 

Hi there, trying to make my text change color on hover (or before hover) and can't get it to work.

 

.sqs-announcement-bar { 
  width: 100%;
  background: #FEE196 !important;
  color: invert !important;
  /* main color */
  webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.sqs-announcement-bar:hover {
  color: #ffffff !important; 
  border-color: white !important;
  background-color: hsl(68, 10%, 57%) !important; /* hover color */
  webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
} 

for some reason neither the "color: invert" nor "color: #ffffff" are changing it.

 

I appreciate any help!

Link to comment
  • Replies 3
  • Views 559
  • Created
  • Last Reply
17 hours ago, ErikaT said:

Hi there,

Could you try:

.sqs-announcement-bar-text p:hover {
    color: #000;}

This worked sort of

If there was a way to tie that to the main bar hover that would be idea. Currently there are a few times where I can hover over it and not the text and I only get the bar changing colors.

 

Thank you for the help though, this is close!

Link to comment

Ah yes because the hover is only on the text, it doesn't include the padding around it.

So if we remove the padding, then re-create the paddings original size using line-height, then apply the hover, it should work

.sqs-announcement-bar-text {
  padding-top: 0px;
    padding-bottom: 0px;
}

.sqs-announcement-bar-text p {
    line-height: 2.8;
}

.sqs-announcement-bar-text p:hover {
    color: #000;}

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.