CSS Code for link hover style

Site URL: http://jordanakozy.com

Hello! I'm trying to stylize the hover on hyperlinks in different blocks (text, image blocks etc.) They all have different native styles. I used:

h3 a:hover,{color: #309166}

for headers and it worked. Does anyone know code for normal text and for image block text?

Please post the site-wide password so we can take a look at your site.

joko

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.

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

Try the following.

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

  color: #309166;
  
  }

Let us know how it goes.

3 minutes ago, creedon said:

Try the following.

#yui_3_17_2_1_1600040381556_65 .image-subtitle p:nth-of-type(2) a:hover {

  color: #309166;
  
  }

Let us know how it goes.

Didn't work 😕

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.

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"

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.

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.

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?

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.

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!