Change Announcement Bar font color on hover

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!

Hi there,

Could you try:

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

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!

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