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

CSS Code for link hover style


jordanakozy

Question

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?

Edited by jordanakozy
Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

12 answers to this question

Recommended Posts

  • 0

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

Edited by creedon
forgot to link to site-wide password help

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0

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.

Edited by creedon
version 2 of CSS

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 😕

Link to post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...