Jump to content

CSS Code for link hover style

Recommended Posts

  • Replies 12
  • Views 1.1k
  • Created
  • Last Reply

Can we see a Page where you've applied the h3 CSS? What is the URL?

In general you can target different types of blocks within a page. For example...

.sqs-block-html {

  }

.sqs-block-image {

  }

Then you could do stuff like...
 

.sqs-block-html h3 a:hover {

  color: red;
  
  }


.sqs-block-image h3 a:hover {

  color: white;
  
  }

That is very general. If you give us a specific page where you want to apply specific rules to elements then we may be able to provide more specific advice.

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
22 hours ago, creedon said:

Can we see a Page where you've applied the h3 CSS? What is the URL?

In general you can target different types of blocks within a page. For example...


.sqs-block-html {

  }

.sqs-block-image {

  }

Then you could do stuff like...
 


.sqs-block-html h3 a:hover {

  color: red;
  
  }


.sqs-block-image h3 a:hover {

  color: white;
  
  }

That is very general. If you give us a specific page where you want to apply specific rules to elements then we may be able to provide more specific advice.

Thanks!

here is an example: 

https://www.jordanakozy.com/bumble-airstream

I'm trying to get the image block text to adjust - specifically the link here "SWEETERY"

I want that link to perform the same as the other links in the body content of the page

Link to comment

Lets give it another try. I updated my previous post with a minor update. Instead of selecting the id #yui_3_17_2_1_1600040381556_65, we select the first .sqs-block-image-figure.

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
7 minutes ago, creedon said:

Lets give it another try. I updated my previous post with a minor update. Instead of selecting the id #yui_3_17_2_1_1600040381556_65, we select the first .sqs-block-image-figure.

Still no! It's so strange - I can't figure out the code for that block. They call it an "image block:card"

Link to comment

There is no class named ".sqs-block-image-card-body-text" that I can see on that page so that won't work.

You can target ".sqs-block-image-figure" as I've done above.

801561492_ScreenShot2020-09-13at6_04_38PM.png.fec5a6c09186f0ec41fa32ffbda1d7bb.png

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
  • 2 weeks later...
On 9/13/2020 at 6:10 PM, creedon said:

There is no class named ".sqs-block-image-card-body-text" that I can see on that page so that won't work.

You can target ".sqs-block-image-figure" as I've done above.

801561492_ScreenShot2020-09-13at6_04_38PM.png.fec5a6c09186f0ec41fa32ffbda1d7bb.png

update - so this worked:

.sqs-block-image-figure:nth-of-type(1) .image-subtitle p:nth-of-type(2) a:hover {

  color: #309166;
  
  }

but only for the "sweetery" link you have highlighted here...not the other links in the image block. Any thoughts?

Link to comment
27 minutes ago, jordanakozy said:

so this worked but only for the "sweetery" link you have highlighted here...not the other links in the image block. Any thoughts?

Ah. I misunderstood that you want all the links in that image block with the card layout to go greenish on hover.

So remove the previous CSS and try the following.

.sqs-block-image .design-layout-card .image-subtitle-wrapper a:hover {

  color: #309166;
  
  }

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
1 hour ago, creedon said:

Ah. I misunderstood that you want all the links in that image block with the card layout to go greenish on hover.

So remove the previous CSS and try the following.


.sqs-block-image .design-layout-card .image-subtitle-wrapper a:hover {

  color: #309166;
  
  }

Let us know how it goes.

Yes!!! Thank you so much!

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.