[Resolved] GB Headline Icon hover

[Mark]

Is there a way to make the headline icon active when the headline is a link? Right now only the text changes on hover. Can I get the text and the icon to change on hover using css?

My work around is to add a button above the headline, and make the button active on hover so they are both active on hover, but they’re two different links, a h2 link beneath a button link. It works, but they are active independent of one another and I want the icon and the text to be active simultaneously. So I’m thinking the headline icon would be the best option.

[David]

Hi there,

try this CSS:

.gb-headline-wrapper:hover {
   color: blue;
}

The Headline and the SVG should inherit that color.

If you want it to only apply to the Icon the try:

.gb-headline-wrapper:hover .gb-icon svg {
   color: blue;
}

Note this will work with all built in icons.
For it to apply to an imported SVG make sure your path fill="currentColor"

eg.

<svg aria-hidden="true" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm92.49 313l-20 25a16 16 0 01-22.49 2.5l-67-49.72a40 40 0 01-15-31.23V112a16 16 0 0116-16h32a16 16 0 0116 16v144l58 42.5a16 16 0 012.49 22.5z"></path>
</svg>

[Mark]

Thanks David

I used the first one and it worked well for changing the color of the icon on hover, however the icon is not clickable. Only the text is clickable, so perhaps I’ll go back to the button.

Is there a way to position the button text below the button?

[Tom]

Hi there,

Not too sure what you mean by button text below the button? Are you wanting the button icon up above the text?

Let me know 🙂

[Mark]

Yes. That’s correct.

Icon Above
text below

Its a small thing, but I want both the icon and the text to be clickable, and both change at the same time when in hover state.

If I use the Heading method I can stack the icon above the text, but only the text is clickable.

The way I have it set up is, I’m using a button for the icon, and a heading for the text. Both are clickable, but on hover they change independent of one another. I want them to be one and the same and change together when either one is in hover.

[David]

Tricky one as the Icon sits outside of the anchor element.
You can try this CSS which will make the entire headline container clickable:

.gb-headline-wrapper {
	position: relative;
}
.gb-headline-wrapper:hover {
	color: blue;
}
.gb-headline-wrapper .gb-icon + .gb-headline a:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

[Mark]

Thanks David. Works perfectly. That’s exactly what I want. I knew it was the wrapper, but couldn’t figure out the selector. You really dug into that one. Much appreciated.

[David]

You’re welcome 🙂

[Author]

Posts