[Support request] Background and text color change on hover

[Anjali Chawla]

Hi,

I want to have the background color and text color change on the link hovering exactly the same way as on this site: https://nomadicated.com

Please help.

Thanks!

[Leo]

Hi there,

Not sure if I fully understand.

Is there a specific section we should be looking at in the example site?

Please also provide your site in question as well.

Thanks!

[Anjali Chawla]

Hi,

On the example site, check any one of the posts. When you hover over the underlined link, the color of the link text and the background color change. I want that effect.

Thanks!

[Fernando]

Hi Anjali,

Try adding this through Appearance > Customize > Additionnal CSS:

.single-post .entry-content a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--global-color-8);
    width: 100%;
    z-index:1;
    transition: height 0.2s ease-in;
}

.single-post .entry-content a{
    position: relative;
    border: none;
white-space:nowrap;
}

.single-post .entry-content a:hover{
    border:unset !important;     
}

.single-post .entry-content a:hover::after {
    height:100%;
    z-index:-1;
}

.single-post .entry-content a:hover{
    color: #fff !important;
    z-index: 1000;
}

[Anjali Chawla]

Hi Fernando,

Thanks for the help.

The code is working mostly, however, there are a few links that are not showing the underline, and while their text is changing to white but the background color isn’t changing. Please check the links to the Vietnam itinerary and the best places to stay in Phu Quoc in my latest post about Vietnam. I’ve shared the link to the post in private info.

Just so you know, I’m already using the CSS code for underlining the links:
}
body.single-post .entry-content a:hover {
border-bottom: 3px solid #a64253;
padding-bottom: 3px;
}

Kind regards,
Anjali

[Fernando]

I see. Can you remove the code you have first and I’ll re-check?

[Anjali Chawla]

Sure. I’ve removed the CSS code for underlining the link.

[Fernando]

I updated the code here: https://generatepress.com/forums/topic/background-and-text-color-change-on-hover/#post-2565452

Can you update yours with this new code?

[Anjali Chawla]

Hey Fernando,

This works 🙂 However, the line under some links is thicker than others like in the recent post in a Vietnam essentials box if you see the line under Cookly or Lonely Planet Guidebook is thicker than the lines under Viator or Get your Guide. Can you check, please?

[Fernando]

Try setting the height: 2px; to height: 3px;

[Anjali Chawla]

It’s fixed. Thank you so so much, Fernando 🙂

[Fernando]

You’re welcome, Anjali! 🙂

[Anjali Chawla]

Hey Fernando,

I just noticed that the mobile layout of my blog is disturbed after adding the CSS.

Please check the blog on mobile. The content is not visible properly, you’ll have to scroll horizontally to read the content. That’s strange.

What can be the issue? Please help fix it.

Thanks!

[Fernando]

Can you try changing the code to this?:

@media (min-width: 1025px){
.single-post .entry-content a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--global-color-8);
    width: 100%;
    z-index:1;
    transition: height 0.2s ease-in;
}

.single-post .entry-content a{
    position: relative;
    border: none;
white-space:nowrap;
}

.single-post .entry-content a:hover{
    border:unset !important;     
}

.single-post .entry-content a:hover::after {
    height:100%;
    z-index:-1;
}

.single-post .entry-content a:hover{
    color: #fff !important;
    z-index: 1000;
}
}

[Anjali Chawla]

Hey Fernando,

It has fixed the layout issue on mobile but then the link hover effect also isn’t showing on mobile.

[Author]

Posts