Change behaviour/looks of blog preview title links

Site URL: https://marcoracanelli.com/analisi-dei-dati-con-python

Hello,

I am trying to change the behavior of the blog post titles on this page (https://marcoracanelli.com/analisi-dei-dati-con-python)

Ideally, when hovering over them, they'd slightly change color and get a color background, to emphasize that they are links.

I had done in the past something similar to the blog summary section with the following code:

.summary-title-link:hover {
  color: #0b1a4e;
  background-color: #D6F3E7;
}

.summary-title-link:active {
  background-color: #f4adae;
}

.summary-title-link:visited {
  color: #0a6883;
 }

However, I am not able to replicate this in the desired blog page.

Could you help?

thank you,
Marco

On 10/23/2021 at 1:12 AM, mracanelli said:

Site URL: https://marcoracanelli.com/analisi-dei-dati-con-python

Hello,

I am trying to change the behavior of the blog post titles on this page (https://marcoracanelli.com/analisi-dei-dati-con-python)

Ideally, when hovering over them, they'd slightly change color and get a color background, to emphasize that they are links.

I had done in the past something similar to the blog summary section with the following code:

.summary-title-link:hover {
  color: #0b1a4e;
  background-color: #D6F3E7;
}

.summary-title-link:active {
  background-color: #f4adae;
}

.summary-title-link:visited {
  color: #0a6883;
 }

However, I am not able to replicate this in the desired blog page.

Could you help?

thank you,
Marco

Edit above post >> Add a Code Block on top of blog post >> Paste this code

<style>
  article.BlogList-item a:hover {
    color: red;
    background-color: green;
    padding: 5px;
}
</style>

@tuanphan it worked beautifully, thank you

On 11/8/2021 at 8:31 PM, mracanelli said:

@tuanphan it worked beautifully, thank you

I see search icon in header is black color, while nav items and logo is white color, you can add this CSS to make search to white

/* header search icon */
header.Header svg.Icon.Icon--search--small {
    filter: brightness(0) invert(1);
}