[Resolved] Can’t figure out custom CSS to disable hover over on H2

[Jason]

Hello again!

I’m trying to add a hover-over effect on my category/tag labels which I added a border to:

https://fullcleared.com/news/

The thing is, I am also using the dynamic text to pull the term archives in my custom title bar. If you mouse over the H2 in the top gradient bar, it also adds the background-color. I tried replicating the same CSS I used to hide the standard border from the H2 but it doesn’t work on the hover over (I actually don’t think I did the hiding on the normal text properly, but it works so /shrug!)

Here’s the CSS I’m using, some of it came from another GP Site Library template and then I started messing with it.

/* Category label background colors */

.post-term-item {
	border-radius: 3px;
}

p:not(body) .post-term-item {
	background-color: var(--blue);
	padding: 3px 7px 3px 7px;
}

.post-term-item:hover {background-color: var(--base);}

p:not(body) .post-term-item.term-recommendations {
	padding: 3px 7px 3px 7px;
	background-color: var(--green);
}

.post-term-item.term-recommendations:hover {
	background-color: var(--purple);
}

p:not(body) .post-term-item.term-news {
	padding: 3px 7px 3px 7px;
	background-color: var(--orange);
}

.post-term-item.term-news:hover {
	background-color: var(--pink);
}

p:not(body) .post-term-item.term-reviews {
	padding: 3px 7px 3px 7px;
	background-color: var(--pink);
}

.post-term-item.term-reviews:hover {
	background-color: var(--orange);
}

p:not(body) .post-term-item.term-features {
	padding: 3px 7px 3px 7px;
	background-color: var(--purple);
}

.post-term-item.term-features:hover {
	background-color: var(--green);
}

Thanks in advance!

[Fernando]

Hi Jason,

You can try adding .site-content to your CSS selector.

Example:

Replace this:

.post-term-item.term-news:hover {
	background-color: var(--pink);
}

With this:

.site-content .post-term-item.term-news:hover {
    background-color: var(--pink);
}

You can also be more specific in your selector if your prefer.

[Jason]

Hey Fernando,

Thanks again for your help. This works, but I also want the hover effect to apply in my post header (i.e. https://fullcleared.com/news/whats-heading-to-xbox-game-pass-in-march-2023/)

To get that to work right now, I just did this:

.site-content .post-term-item.term-recommendations:hover {
	background-color: var(--purple);
}

.gb-inside-container .post-term-item.term-recommendations:hover {
	background-color: var(--purple);
}

Is there a way to cover both in one statement? I tried a , between .site-content and .gb-inside-container but it just changed the background color for that area entirely.

Thanks!

[Jason]

Nevermind I got it figured out! Thanks again for your help!

[Fernando]

You’re welcome, Jason!

[Author]

Posts