Hover colour by category on "Classic Recent Posts"

[untypical]

I have set up a Classic Recent Posts element on a page for each of three categories. I would like have different coloured hover colours by category (e.g. pink when hovering over posts for category 1, orange when I hover over category 2, etc). I know it can be done with CSS - I did it once before and can’t find the code.

Please help - kind regards and greetings from Australia!

[prakash_s]

Hello @untypical,

Thanks for writing to us

You can use custom CSS code to achieve it but you need to add a distinct custom Class to separate the color. Please have a look at the given screenshot below.

Add this custom CSS code

.hover-color.x-recent-posts .x-recent-posts-img:after {
background-color: #245b9b;
}
.hover-color.x-recent-posts a:hover .h-recent-posts {
color: #245b9b;
}

Now you can add a separate class on the element then you need to change the class name in the code and color code as per your design.

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[untypical]

Thank you!

[tristup]

Hi @untypical,

You are most welcome.