Change hover colour throughout a Blog

Site URL: https://lobster-ray-g42d.squarespace.com/knowledge-news

Hi!

I would like to change the hover colour of text links  and 'Read More' links in my blog section. I cannot seem to change the hover colour in Site Styles, and currently when I hover the text 'disappears' as it becomes the same colour as my background.

Currently, I am trying this code!?!?

section[data-section-id="60b02fef63cb4154a2416bdf"] a:hover {
    color: #d85820;
}

Places you can see this occurring: 

https://lobster-ray-g42d.squarespace.com/knowledge-news

https://lobster-ray-g42d.squarespace.com/knowledge-news/protecting-indigenous-communities-from-covid-19

pw: youcanenter

Thank you for your help!

Louisa

Try:

.blog-title a:hover {
	color: #d85820 !important;
}

if it's only going to be for that specific section, you would add the section ID before the other selectors, separated by a space:

section[data-section-id="60b02fef63cb4154a2416bdf"] .blog-title a:hover {
	color: #d85820 !important;
}

1 hour ago, IgnitePerth said:

Try:

.blog-title a:hover {
	color: #d85820 !important;
}

if it's only going to be for that specific section, you would add the section ID before the other selectors, separated by a space:

section[data-section-id="60b02fef63cb4154a2416bdf"] .blog-title a:hover {
	color: #d85820 !important;
}

 

Thank you Ignite - I am trying to change the hover colour however in the actual blog entries.  Any thoughts on how that could change? Thanks!

When you say in the actual blog entries, do you mean on a page like this.

Are you referring to the text on the bottom that takes you to the next blog?

1 hour ago, IgnitePerth said:

When you say in the actual blog entries, do you mean on a page like this.

Are you referring to the text on the bottom that takes you to the next blog?

I mean on the page where the blog content sits.  See pic below. The links within the paragraphs when you hover over them turn the colour of the background, I am trying to change them to a different colour on hover.

NOT the text on the bottom that takes you to the next blog.

Thank you!

The link you provided to that page does not work for me, so as a guess, the below code will change links, on hover, in blog pages only.   Replace blue with the color code you would like to have it change to on hover.

.blog-item-content .sqs-block-html a:hover {
    color: blue !important;
}

If you would like to change the colour of links in general (when not hovered) you can do this by editing your site styles (click the paintbrush icon in the top right of your page).

Check which style is applied to the sections you want to change - in the below image it is LIGHTEST 1.  click the pencil icon on Lightest 1 to edit the colour pallette, and look for links > text links.

2 hours ago, IgnitePerth said:

The link you provided to that page does not work for me, so as a guess, the below code will change links, on hover, in blog pages only.   Replace blue with the color code you would like to have it change to on hover.

 

.blog-item-content .sqs-block-html a:hover {
    color: blue !important;
}

 

If you would like to change the colour of links in general (when not hovered) you can do this by editing your site styles (click the paintbrush icon in the top right of your page).

Check which style is applied to the sections you want to change - in the below image it is LIGHTEST 1.  click the pencil icon on Lightest 1 to edit the colour pallette, and look for links > text links.

Thank you so much, that worked perfectly.

Is there a way also to change the 'Read More' hover colour too on this page?

https://lobster-ray-g42d.squarespace.com/knowledge-news

Thank you!

NP!

 

a.blog-more-link:hover {
	color: #d85820 !important;
}

7 minutes ago, IgnitePerth said:

NP!

 

a.blog-more-link:hover {
	color: #d85820 !important;
}

 

ah! You're the best! Much appreciated! Happy weekend