Only Have Link Hover Affect Apply For Body Text In Blog Post

[JosephLucero]

I have custom CSS on my blog and would only like the hover CSS to apply to links within the body text. I have Social Sharing Icons to the left of my body text that adopt the hover effect for some reason on desktop.

It does not look right and I would only like it to happen for the body text in each blog post. Any ideas? I have exhausted all the CSS in my knowledge.

[mldarshana]

Hi Joseph,

Thanks for writing in! Your social icons are targeting with the following rule and there is another rule for your body content. You can remove the following custom CSS rule or change it accordingly for your social icons.

.single-post .entry-content a:hover::before {
    width: 100%;
    background: #83C9F4;
    transition: width .5s ease;
}

Hope that helps.

[JosephLucero]

Hello,

I don’t see the separate classes and was not able to find a solution…

[friech]

Hi Joseph,

@JosephLucero

I have custom CSS on my blog and would only like the hover CSS to apply to links within the body text.

The selector you use for your custom CSS is not very specific

.single-post .entry-content a:before { }

and

.single-post .entry-content a:after { }

You can use the :not() pseudo class to negate those social icon links.

e.g.

.single-post .entry-content a:not(.nolightbox):after { }

.single-post .entry-content a:not(.nolightbox):before { }

The class .nolightbox is a class that is present on your icon links, so we can use that in conjunction with the :not() pseudo class.

It’s like saying, apply this CSS styling on all links on my post content, but not on links with nolightbox class.

Hope that shed some lights,
Cheers!

[JosephLucero]

Hey Friech,

That worked to remove the link hover effect from my social icons, however, my links within the blog post always display the underline effect. without even hovering.

[rad]

Hi Joseph,

In that case, please change that CSS ot this

.single-post .entry-content a:not(.nolightbox):before {
display: none;
} 

It should hide it along with its background color(line).

Hope this helps.

[JosephLucero]

Hey Rad,

I added this in addition to my original CSS, and now the Social Links are displaying the hove effect again. The body text does not display it at all

[ruenel]

Hello @JosephLucero,

You used this custom css for the link hover effect:

.single-post .entry-content a:hover:before {
    width: 100%;
    background: #83C9F4;
    transition: width .5s ease;
}

If you only want to apply this code to the body links and not the social icons, you will need to update your code and use this:

.single-post .entry-content a:hover:before {
    width: 100%;
    background: #83C9F4;
    transition: width .5s ease;
}

.single-post .entry-content .essb_links a:hover:before {
    display: none;
}

We would love to know if this has worked for you. Thank you.

[JosephLucero]

Works great, thank you!

[nabeel]

Glad we could help.

Cheers!