Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change Announcement Bar font color on hover


mattvrgs

Question

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!

Edited by mattvrgs
Link to comment

3 answers to this question

Recommended Posts

  • 0
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
  • 0

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

Create an account or sign in to comment

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

×
×
  • Create New...