Jump to content

Frustrated: Hover text not changing color with css

Recommended Posts

Hello. I am using the color codes and css below to make certain homepage images have a transparent dark grey overlay with beige text change to a transparent beige background with dark grey text on hover (basically just switching colors on hover). However, the text is staying beige, even when adding "important" to the code. Not sure what the issue is. If someone could figure out how to make the hover text grey, I'd be so grateful.

Thanks! website: www.quadrant25.com pw: Quadrant25

Cream color codes: RGB: 248, 240, 226, HEX: #f8f0e2, HSL: 38, 61, 92
Grey color codes: RGB: 68, 68, 65, HEX: #444441, HSL: 60, 2, 26
 

/* set the initial background color and text color */
#block-4d9159bed5c68c86d676,
#block-5fe23bf021cbdac4b243,
#block-58052db15bcb402167b3,
#block-362f90c2afaf8844ec0c,
#block-75ac13840ab92eacc286,
#block-569f7648aaa626926741 {
  background: rgba(68, 68, 65, 0.5); /* set a dark grey color with 50% opacity */
  padding: 1px;
  text-align: center;
  color: #f8f0e2;
  transition: background-color 0.3s ease; /* add transition for smooth effect */
}

/* apply the hover effect to all the blocks */
#block-4d9159bed5c68c86d676:hover,
#block-5fe23bf021cbdac4b243:hover,
#block-58052db15bcb402167b3:hover,
#block-362f90c2afaf8844ec0c:hover,
#block-75ac13840ab92eacc286:hover,
#block-569f7648aaa626926741:hover {
  background: rgba(248, 240, 226, 0.5); /* change background color to transparent beige on hover */
  color: #444441 !important; /* change text color to #444441 on hover */
}

Link to comment
27 minutes ago, abibacon said:

Hey @SupaJ, you’re probably going to need to target more specifically. What kind of block are you using (I’m not at my laptop)

Hi @abibacon. I have a text block with a transparent background over an image block. So, it's the text block background and text colors I want to change on hover (and I want to keep the background transparency).

Link to comment
3 hours ago, SupaJ said:

Hi @abibacon. I have a text block with a transparent background over an image block. So, it's the text block background and text colors I want to change on hover (and I want to keep the background transparency).

Hey @SupaJ, make sure you’re targeting both the text block and the image block, these will have separate ID’s.

 

Squarespace Developer based in Hampshire, England

If you'd like to make a contribution for my time you can Buy Me A Coffee.

Link to comment

You probably just need to add h4 and p before the color property when hovering.

 

Try this:

/* apply the hover effect to all the blocks */
#block-4d9159bed5c68c86d676:hover,
#block-5fe23bf021cbdac4b243:hover,
#block-58052db15bcb402167b3:hover,
#block-362f90c2afaf8844ec0c:hover,
#block-75ac13840ab92eacc286:hover,
#block-569f7648aaa626926741:hover {
  background: rgba(248, 240, 226, 0.5); /* change background color to transparent beige on hover */
  h4, p {
    color: #444441 !important; /* change text color to #444441 on hover */
  }
}

Looking for help with a project?
💻 www.connectionmadedesign.com
 for hire on Upwork (Top Rated Plus)

Link to comment
1 hour ago, AndyB said:

You probably just need to add h4 and p before the color property when hovering.

 

Try this:

/* apply the hover effect to all the blocks */
#block-4d9159bed5c68c86d676:hover,
#block-5fe23bf021cbdac4b243:hover,
#block-58052db15bcb402167b3:hover,
#block-362f90c2afaf8844ec0c:hover,
#block-75ac13840ab92eacc286:hover,
#block-569f7648aaa626926741:hover {
  background: rgba(248, 240, 226, 0.5); /* change background color to transparent beige on hover */
  h4, p {
    color: #444441 !important; /* change text color to #444441 on hover */
  }
}

@AndyB thanks but it didn't work. 😕

Link to comment

ok. after playing around with this for far too long, the color transitions are correct. but...it still transitions too slowly. if i set the transitions to 0s though, each line of text changes immediately only when scrolling over them and THEN all the text fades into the correct color which makes it look glitchy. so, if anyone can figure out a way to make this seem a little smoother, i'm all ears. otherwise, i think it's the best fix i'll be able to get.

 

/* set the initial background color and text color */
#block-4d9159bed5c68c86d676,
#block-5fe23bf021cbdac4b243,
#block-58052db15bcb402167b3,
#block-362f90c2afaf8844ec0c,
#block-75ac13840ab92eacc286,
#block-569f7648aaa626926741 {
  background: rgba(68, 68, 65, 0.5); /* set a dark grey color with 50% opacity */
  padding: 1px;
  text-align: center;
  color: #f8f0e2;
  transition: background-color 0.05s ease, color 0.05s ease; /* add transition for smooth effect */
}

/* apply the hover effect to all the blocks */
#block-4d9159bed5c68c86d676:hover,
#block-5fe23bf021cbdac4b243:hover,
#block-58052db15bcb402167b3:hover,
#block-362f90c2afaf8844ec0c:hover,
#block-75ac13840ab92eacc286:hover,
#block-569f7648aaa626926741:hover {
  background: rgba(248, 240, 226, .5); /* change background color to transparent beige on hover */
  color: #444441 !important; /* change text color to #444441 on hover */
}

/* apply the hover effect to all the text within the blocks */
#block-4d9159bed5c68c86d676 *,
#block-5fe23bf021cbdac4b243 *,
#block-58052db15bcb402167b3 *,
#block-362f90c2afaf8844ec0c *,
#block-75ac13840ab92eacc286 *,
#block-569f7648aaa626926741 * {
  color: inherit;
  transition: color 0.05s ease; /* add transition for smooth effect */
}

/* apply the hover effect to h4 elements within .sqs-block-content */
.sqs-block-content:hover .sqsrte-text-color--lightAccent:hover{
  color: #444441 !important; /* change text color to black on hover */
  transition: color 0.05s ease; /* add transition for smooth effect */
}

Edited by SupaJ
Link to comment

I'm not sure I'm looking at the right text block. Could you give us the block ids for one that is working correctly and one that is not?

I have identified what might be an issue. A number of rulesets are missing block ids. So the effect is not the same across all blocks.

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
On 4/16/2023 at 4:44 AM, creedon said:

I'm not sure I'm looking at the right text block. Could you give us the block ids for one that is working correctly and one that is not?

I have identified what might be an issue. A number of rulesets are missing block ids. So the effect is not the same across all blocks.

Thanks for the reply. Actually, all the block ids I'm concentrating on are listed in the code (6 of them). The others were meant to show overlay colors to my client. Sorry for any confusion. So, it's just the first set of 6 images/text blocks that I'm trying to get the effect to work for. You should be able to see that it's transitioning correctly colorwise but the transition is super slow and disjointed. Like, you hover and the background changes and then the text color fades in after that. Hope that makes sense. 

Link to comment

@creedon, for what it's worth, I just tried taking this bit of code out, because I think that's what was causing the individual lines of text to change color on hover (including scrolling over text in the footer). when i remove it, the only issue seems to be how slowly the text transitions colors even though i have it set to 0s. 😕

/* apply the hover effect to h4 elements within .sqs-block-content */
.sqs-block-content:hover .sqsrte-text-color--lightAccent:hover{
  color: #444441 !important; /* change text color to black on hover */
  transition: color 0.05s ease; /* add transition for smooth effect */
}

Edited by SupaJ
Link to comment
Quote

the transition is super slow and disjointed. Like, you hover and the background changes

It appears you are using the fade animation which puts a transition on the elements of the text block itself.

ScreenShot2023-04-18at1_53_50PM.png.05ed4e140d6371205906b54526bc7e46.png

 

ScreenShot2023-04-18at1_57_17PM.thumb.png.13262b5fdbb04b46df1f3b06ab1d2f20.png

If you want to override the transitions on those text blocks then you'll need to throw an !important at the end of your property/value pairs.

Let us know how it goes.

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

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.